D3.js D3-更新和清理图表'；点击一下就可以了

我正试图实现这个简单的仪表板来与我的后端协同工作。问题是后端并不总是提供相同数量的“类别”，因此条形图不能按预期工作。我对示例数据进行了修改，单击饼图中的不同“组”后出现问题

---

如何从条形图中清除数据并仅显示每个组可用的条形图和标签？

您的图表不会删除现有的额外元素，并在需要时追加。 我更新了您的以应用输入更新退出模式：

var plot = d3.select("#barChartPlot")
  .datum(currentDatasetBarChart)
  .select('g.plot');

  var dataBound = plot.selectAll("rect")
      .data(currentDatasetBarChart);
    dataBound.exit()
      .remove();
    dataBound.enter().append('rect');
    dataBound.transition()
         .duration(750)
         .attr("x", function(d, i) {
            return xScale(i);
         })
         .attr("width", width / currentDatasetBarChart.length - barPadding)   
         .attr("y", function(d) {
            return yScale(d.measure);
         })  
         .attr("height", function(d) {
            return height-yScale(d.measure);
         })
         .attr("fill", colorChosen);

这基本上意味着每次选择更改时，您都需要重新选择所有矩形，删除无用的矩形，添加新矩形，然后更新所有属性

我还向包含矩形的组添加了一个

plot

类，以便能够在适当的位置对其进行操作

作为旁注，我建议：

• 使用

  轴

  ，而不是自己操作标签
• 每个栏创建一个svg组，包含rect和文本，并翻译完整的组
• 使用D3V4

---

感谢您的帮助和建议。我已经开始将图形更改为d3v4版本，但遇到了一些新问题，因此将稍后离开。一个问题：在您更新的my plunk版本中，您知道为什么条形图在查看类别较少的组后会丢失y标签吗？例如，如果单击“组4”，然后查看“组2”，则只有第一个栏具有y标签。第424行和第425行删除额外标签。我没有在那里添加

append

。您需要添加

labels.enter（）.append（'text'）.classed（“yAxis”，true）
var plot = d3.select("#barChartPlot")
  .datum(currentDatasetBarChart)
  .select('g.plot');

  var dataBound = plot.selectAll("rect")
      .data(currentDatasetBarChart);
    dataBound.exit()
      .remove();
    dataBound.enter().append('rect');
    dataBound.transition()
         .duration(750)
         .attr("x", function(d, i) {
            return xScale(i);
         })
         .attr("width", width / currentDatasetBarChart.length - barPadding)   
         .attr("y", function(d) {
            return yScale(d.measure);
         })  
         .attr("height", function(d) {
            return height-yScale(d.measure);
         })
         .attr("fill", colorChosen);