javascript - 更新 d3 中的多系列面积图

Question

我正在使用 d3 创建面积图。

这段代码可以工作，但是我对更新方法(切换)中的数据结构不满意，实际上我不明白我做错了什么。

创建图表时，我通过以下方式传递数据:

data([nsw,qld])
// then draw the chart

当我更新图表时，我通过以下方式传递数据:

chart.data([nsw]);
// draw the nsw series in the chart
chart.data([qld]);
// draw the qld series in the chart

我当然可以通过以 [nsw,qld] 的正确格式传递数据来更新数据

  <script type="text/javascript" src="lib/d3.min.js" charset="utf-8"></script>
  <svg id="chart"></svg>

  <script>

  var NSW = "NSW";
  var QLD = "QLD";

  var width = 400;
  var height = 400;

  var years = [1,2,3,4,5];

  var data = years.map(function(){ return [Math.random(),Math.random()]; });   // generate bogus data
  var nsw = data.map(function(d) { return d[0];}); // extract new south wales data
  var qld = data.map(function(d) { return d[1];}); // extract queensland data

  var chart = d3.select("#chart").attr("width", width).attr("height", height).append("g");
  var x = d3.scale.linear().domain([0, years.length]).range([0, width]);
  var y = d3.scale.linear().domain([0, d3.max(data, function(d){ return Math.max(d[0], d[1]); })]).range([height,0]);
  var area = d3.svg.area().x(function(d,i) { return x(i); }).y0(height).y1(function(d, i) { return y(d); });

  console.log([nsw,qld])

  chart
  .selectAll("path.area")
  .data([nsw,qld])          // !!! here i can pass both arrays in.
  .enter()
  .append("path")
  .attr("fill", "rgba(0,0,0,0.5)")
  .attr("class", function(d,i) { return [NSW,QLD][i]; })
  .attr("d", area);

  chart.on("click", function() {

    data = years.map(function(){return [ Math.random(),Math.random()];}); // switch in some new random data

    var nsw = data.map(function(d) { return d[0];})
    var qld = data.map(function(d) { return d[1];})

    y.domain([0, d3.max(data, function(d){ return Math.max(d[0], d[1]); })]).range([height, 0]);

    var svg = chart.transition();

    /*
    svg
    .selectAll("path")
    .data([nsw,qld])        // !!! this doesn't work.
    .duration(750)
    .attr("d", function(d) { return area(d); });
    */

    chart.data([nsw]);      // !!! here i'm only passing in one!

    svg.select("path.NSW")
    .duration(750)
    .attr("d", function(d) {return area(d); });

    chart.data([qld]);      // !!! ...and then another

    svg.select("path.QLD")
    .duration(750)
    .attr("d", function(d) { return area(d); });
  });

  </script>

fiddle 链接: http://jsfiddle.net/MLA3x/

Answer 1

问题是您在更新部分中使用了转换而不是选择。也就是说，您在转换时调用 .data()，但您无法执行此操作。如果您在更新数据后添加转换，则效果很好:

chart
 .selectAll("path")
 .data([nsw,qld])
 .transition()
 .duration(750)
 .attr("d", function(d) { return area(d); });

完整演示 here .