Question

我正在尝试使用这个简单的信息中心http://bl.ocks.org/diethardsteiner/3287802来处理我的后端。问题是后端并不总是提供相同数量的＆＃34;类别＆＃34;所以条形图没有按预期工作。我创建了一个样本数据小提示，点击不同的＆＃34;组＆＃34;在饼图中https://jsfiddle.net/7t67yxfk/1/。

    function up(d, i) {
            /* update bar chart when user selects piece of the pie chart */
            //updateBarChart(dataset[i].category);
            updateBarChart(d.data.category, color(i));           
}

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

Answer 1

您的图表不会删除存在的额外元素，并在需要时追加。我更新了您的plunk以应用enter-update-exit模式：

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类，以便能够在适当的位置操作它们。

作为附注，我建议：

使用axis代替自己操纵标签
每个栏创建一个svg组，包含rect和文本，并翻译该完整组
使用d3 v4

D3 - 点击

1 个答案: