Question

我在d3中创建条形图作为更大数据可视化的一部分。我希望能够在可视化的一部分中更改数据，并且所有图表都将更新。图表的简化版如下：

var dataset = [1, 3, 5, 3, 3];

...
var svg = d3.select("body #container").append("svg")
        .attr("width", width)
        .attr("height", height);

    var g = svg.append("g");
...

我使用此svg元素创建其他图表，如地图，圆圈等。条形图是这样实现的。

 function bars(dataset) {
      var barChart = g.selectAll("rect.bar")
        .data(dataset)
        .enter();

      barChart.append("rect")
        .attr("class", "bar")
        .attr("x", function(d, i) { return i * 30 + 100; })
        .attr("y", function(d) { return (height - 130) - d * 4;})
        .attr("width", 25)
        .attr("height", function(d) { return d * 4; });


       barChart.append("text")
        .text(function(d) { return d; })
        .attr("x", function(d, i) { return i * 30 + 103; })
        .attr("y", function(d) { return (height - 130) - d/10 - 5;})
        .attr("font-family", "sans-serif")
        .attr("font-size", "10px")
        .attr("fill", "darkgray"); 
}

现在这会使条形图变好，但有一个功能

...
.on("click", function() {
   ...
   var newdata = [5, 2, 6, 2, 4]; // new values
   g.selectAll("rect.bar").remove();  // This removes the bars
   g.selectAll("text").remove();    // Problem here: All texts are removed
   bars(newdata);
}

我尝试使用.remove（）函数转换带有新值的条形图。这适用于条形矩形，因为没有其他条形图，但当我尝试删除上面显示的值标签时，所有其他文本元素也被删除。有没有办法只更新与栏相关的文字？

Answer 1

您是否尝试过对课程应用课程并仅选择要删除的课程？例如

barChart.append("text")
  .attr('class','label')
  .text(function(d) { return d; })

然后

g.selectAll(".label").remove();

顺便提一下，如果并非所有元素都在更新之间被删除，那么您是否考虑使用enter()和exit()将新数据绑定到现有元素，而不是删除所有元素并且只删除正在改变的元素？

编辑喜欢这样：

function bars(dataset) {
  var bar = g.selectAll(".bar").data(dataset);

  bar.exit().remove();

  bar.enter().append("rect").attr("class", "bar");

  bar
    .attr("x", function(d, i) { return i * 30 + 100; })
    .attr("y", function(d) { return (height - 130) - d * 4;})
    .attr("width", 25)
    .attr("height", function(d) { return d * 4; });

  var label = g.selectAll(".label").data(dataset);

  label.exit().remove();

  label.enter().append("text").attr("class", "label");

  label
    .text(function(d) { return d; })
    .attr("x", function(d, i) { return i * 30 + 103; })
    .attr("y", function(d) { return (height - 130) - d/10 - 5;})
    .attr("font-family", "sans-serif")
    .attr("font-size", "10px")
    .attr("fill", "darkgray"); 
}

如何在d3中更新带有附带文本的条形图？

1 个答案: