score:1

here is a index.js with a click callback that deletes a bar:

import * as d3 from "d3";

let _data = [
  {
    id: 0,
    country: "china",
    population: 1400000000
  },
  {
    id: 1,
    country: "india",
    population: 1200000000
  },
  {
    id: 2,
    country: "usa",
    population: 450000000
  },
  {
    id: 3,
    country: "russia",
    population: 145000000
  }
];

const update = data => {
  const dimensions = {
    width: 600,
    height: 600
  };

  const margins = {
    left: 100,
    top: 20,
    right: 20,
    bottom: 100
  };

  const innerdimensions = {
    width: dimensions.width - margins.left - margins.right,
    height: dimensions.height - margins.top - margins.bottom
  };

  const xscale = d3
    .scaleband()
    .domain(data.map((d) => d.country))
    .range([0, innerdimensions.width])
    .padding(0.1);

  const yscale = d3
    .scalelinear()
    .domain([0, d3.max(data, (d) => d.population)])
    .range([innerdimensions.height, 0]);

  const xaxis = d3.axisbottom(xscale);
  const yaxis = d3
    .axisleft(yscale)
    .tickformat((n) => d3.format("0.2s")(n).replace("g", "b"));

  d3.select("#canvas").selectall('svg').remove();

  const svg = d3
    .select("#canvas")
    .append("svg")
    .attr("width", dimensions.width)
    .attr("height", dimensions.height);

  const rectg = svg
    .append("g")
    .attr("width", innerdimensions.width)
    .attr("height", innerdimensions.height)
    .attr("transform", `translate(${margins.left}, ${margins.top})`);

  const xaxisg = rectg
    .append("g")
    .attr("class", "x-axis")
    .attr("transform", `translate(0,${innerdimensions.height})`)
    .call(xaxis);

  const yaxisg = rectg.append("g").attr("class", "y-axis").call(yaxis);

  rectg
    .selectall("rect")
    .data(data)
    .join((enter) =>
      enter
        .append("rect")
        .on('click', (e, d) => {
          const newdata = data.filter(item => item.id !== d.id);
          update(newdata);
        })
        .attr("width", xscale.bandwidth())
        .attr("height", 0)
        .attr("y", (d) => innerdimensions.height)
        .attr("x", (d) => xscale(d.country))

        .attr("fill", "steelblue")
        .attr("stroke", "black")
        .attr("stroke-width", 2)
        .call((enter) =>
          enter
            .transition()
            .duration(1000)
            .attr("y", (d) => yscale(d.population))
            .attr("height", (d) => innerdimensions.height - yscale(d.population))
        )
    );
}

update(_data);

Related Query