javascript - 新数据的D3JS刷新图

Question

我正试图通过调用update来用一个新的csv文件（data2.csv）更新图形，但是图形没有改变。下面的代码是我单击按钮时将调用的函数。
Plnkr是示例代码。。
做建议！
http://plnkr.co/edit/pOYqmaOxy1lmY82jlhfA

<script>
function update(){
d3.csv("data2.csv", function(error, data) {
  if (error) throw error;

  var ageNames = d3.keys(data[0]).filter(function(key) { return key !== "State"; });

  data.forEach(function(d) {
    d.ages = ageNames.map(function(name) { return {name: name, value: +d[name]}; });
  });

  x0.domain(data.map(function(d) { return d.State; }));
  x1.domain(ageNames).rangeRoundBands([0, x0.rangeBand()]);
  y.domain([0, d3.max(data, function(d) { return d3.max(d.ages, function(d) { return d.value; }); })]);

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Population");

  var state = svg.selectAll(".state")
      .data(data)
    .enter().append("g")
      .attr("class", "g")
      .attr("transform", function(d) { return "translate(" + x0(d.State) + ",0)"; });

  state.selectAll("rect")
      .data(function(d) { return d.ages; })
    .enter().append("rect")
      .attr("width", x1.rangeBand())
      .attr("x", function(d) { return x1(d.name); })
      .attr("y", function(d) { return y(d.value); })
      .attr("height", function(d) { return height - y(d.value); })
      .style("fill", function(d) { return color(d.name); });

  var legend = svg.selectAll(".legend")
      .data(ageNames.slice().reverse())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

  legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);

  legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return d; });

});
}
</script>

Answer 1

你说你想用你的更新函数更新一个现存的图表，并在一些事件发生后从CSV中得到新的数据，对吗？
D3代表数据驱动的文档，所以在绘制图形时，数据非常重要。D3根据您想要显示的数据处理选择（或者收集，如果这对您更好的话）。
假设您想要一个显示以下数组的条形图：[10,20,30]。条形图的高度与数组中的数据有关。
创建新元素
如果页面上还没有条形图元素，这意味着您需要将它们“附加”到图形中。这通常使用类似于以下内容的代码模式来完成：

svg.selectAll("rect")
      .data(function(d) { return d.ages; })
    .enter().append("rect")
      .attr("width", x1.rangeBand())
      .attr("x", function(d) { return x1(d.name); })
      .attr("y", function(d) { return y(d.value); })
      .attr("height", function(d) { return height - y(d.value); })
      .style("fill", function(d) { return color(d.name); });

在这段代码中，您获取svg变量（基本上是一个包含一个元素svg的d3选择）并选择页面上但svg元素内部的所有“rect”元素。现在还没有，记住，你要创造它们。在selectAll之后，您将看到指定将绑定到元素的数据的数据函数。数组包含3条数据，这意味着您希望看到3条数据。D3怎么知道？因为.enter（）（意思是：哪些元素还没有出现在图上？）以及.append（元素）函数。enter函数基本上意味着：在我当前的d3选择（selecAll（'rect'））中，需要追加多少指定元素？由于您当前的选择是空的（您还没有“rect”元素），d3在您的数据函数中定位3个数据片段，它将使用.append（）为您创建并附加3个元素。使用attr函数可以指定元素的外观。
更新元素
假设我的数组[10,20,30]突然变为[40,50,60]。注意这里很重要的一点，我的数组仍然包含3条数据！只是他们的价值改变了！
我真的很想看到我的酒吧反映这个更新！（我认为你的案子和这个案子吻合）。
但如果我再使用这种模式，会发生什么？

state.selectAll("rect")
      .data(function(d) { return d.ages; })
    .enter().append("rect")
      .attr("width", x1.rangeBand())
      ...

state.selectAll（“rect”）选择包含3个元素，d3检查您有多少条数据（仍然是3条），它发现不需要附加任何内容！
这是否意味着你不能用D3更新？绝对不行！这比你想象的要简单得多。
如果我想更新条形图，使其高度反映我的数据的新值，我应该这样做：

state.selectAll("rect")
      .data(function(d) { return d.ages; })    
      .attr("height", function(d) { return height - y(d.value); });

基本上，我选择所有rect，告诉d3我正在处理的数据，然后简单地告诉d3改变rect的高度。你甚至可以通过过渡来完成！（有关转换的详细信息 here）。我认为这是您需要做的，而不是再次附加“rect”元素。
更新元素，第2部分
继续我的例子，如果我的数组突然变成这样，该怎么办：[100200300400]？注意，我的值再次改变，但有一个额外的元素！!
当处理事件（例如点击一个按钮，或者提交数据）改变数据时，你需要告诉D3它需要追加一些东西并更新现有的条。这可以通过对两种模式进行编码来实现：

state.selectAll("rect")
      .data(function(d) { return d.ages; })
    .enter().append("rect")
      .attr("width", x1.rangeBand())
      .attr("x", function(d) { return x1(d.name); })
      .attr("y", function(d) { return y(d.value); })
      .attr("height", function(d) { return height - y(d.value); })
      .style("fill", function(d) { return color(d.name); });


state.selectAll("rect")
          .data(function(d) { return d.ages; })    
          .attr("height", function(d) { return height - y(d.value); });

删除元素
如果我的数据数组突然只包含2个数据：[10,20]？
就像有一个函数告诉d3它需要附加一些东西一样，你可以告诉它如何处理那些看起来不再有数据绑定的元素：

svg.selectAll("rect")
 .data(function(d) { return d.ages; })
 .exit().remove();

退出函数匹配您所拥有的数据量与选定元素的数量。然后，退出函数告诉D3放弃这些元素。
我希望这对你有帮助。这是一个基本的解释（有点复杂），但我必须快点，所以如果有问题或错误，请告诉我。