Question

我一直在使用Bostock's chained transitions的更新且不断发展的版本。

最近我不得不转向稍微复杂的数据对象模型，并认为现在是切换到json数据的好时机。

我还必须将“当前年份”调整为恰好包括12个月（因此也是去年的一部分）。 IE浏览器。对于缩放模型，数据中的降至零是不可接受的。

现在，出于某种原因，我无法在区域和valueLine过渡中正确更新数据。

所有轴和标签都正确更新。但是，不是渲染新数据然后转换它，而是将当前数据滑落。

我认为这部分代码是错误的，但我无法追踪它：

此外，完整代码已在Plunker HERE上结束。

function change() {
    //clearTimeout(timeout);

    current_year = d3.select(this).text();

    // First transition the line & label to the new current_year.
    var t0 = svg.transition().duration(750);
    t0.selectAll(".label").attr("transform", transform).text(current_year);


    //then transition the y-axis.
    yScale.domain([(d3.min(data[current_year], function(d) { return d.close; })*.98), d3.max(data[current_year], function(d) { return d.close; })]);

    area.y0(yScale(yScale.domain()[0]));    
    t0.selectAll(".area").attr("d", area).attr('fill', colors[current_year]);
    t0.selectAll(".line").attr("d", valueLine).attr('stroke', colors[current_year]);
    var t1 = t0.transition();
    t1.selectAll(".label").attr("transform", transform);
    t1.selectAll(".y.axis").call(yAxis);

    //then update the xAxis
    xScale.domain([d3.min(data[current_year], function(d) { return d.date; }), d3.max(data[current_year], function(d) { return d.date;})]);
    svg.selectAll(".x.axis").call(xAxis);


  }

  function transform(d) {
    return "translate(" + xScale(d.date) + "," + yScale(d.close) + ")";
  }

JSON数据格式如下所示：

{
  "2017": [
      {
        "date": "2016/11/01",
        "close": 778
      },
      {
        "date": "2016/12/01",
        "close": 769
      },
      {
        "date": "2017/01/01",
        "close": 837
      },
      {
        "date": "2017/02/01",
        "close": 829
      },
      {
        "date": "2017/03/01",
        "close": 828
      },
      {
        "date": "2017/04/01",
        "close": 816
      },
      {
        "date": "2017/05/01",
        "close": 799
      },
      {
        "date": "2017/06/01",
        "close": 805
      },
      {
        "date": "2017/07/01",
        "close": 804
      },
      {
        "date": "2017/08/01",
        "close": 789
      },
      {
        "date": "2017/09/01",
        "close": 780
      },
      {
        "date": "2017/10/01",
        "close": 775
      }
    ],
 "2016": [
            {
        "date": "2016/01/01",
        "close": 837
      },
      {
        "date": "2016/02/01",
        "close": 829
      },
      {
        "date": "2016/03/01",
        "close": 828
      },
      {
        "date": "2016/04/01",
        "close": 716
      },
      {
        "date": "2016/05/01",
        "close": 759
      },
      {
        "date": "2016/06/01",
        "close": 705
      },
      {
        "date": "2016/07/01",
        "close": 704
      },
      {
        "date": "2016/08/01",
        "close": 789
      },
      {
        "date": "2016/09/01",
        "close": 780
      },
      {
        "date": "2016/10/01",
        "close": 775
      },
      {
        "date": "2016/11/01",
        "close": 778
      },
      {
        "date": "2016/12/01",
        "close": 769
      }
    ],
  "2015": [
            {
        "date": "2015/01/01",
        "close": 637
      },
      {
        "date": "2015/02/01",
        "close": 629
      },
      {
        "date": "2015/03/01",
        "close": 668
      },
      {
        "date": "2015/04/01",
        "close": 616
      },
      {
        "date": "2015/05/01",
        "close": 669
      },
      {
        "date": "2015/06/01",
        "close": 605
      },
      {
        "date": "2015/07/01",
        "close": 624
      },
      {
        "date": "2015/08/01",
        "close": 689
      },
      {
        "date": "2015/09/01",
        "close": 680
      },
      {
        "date": "2015/10/01",
        "close": 675
      },
      {
        "date": "2015/11/01",
        "close": 668
      },
      {
        "date": "2015/12/01",
        "close": 669
      }
    ],
"2014": [
            {
        "date": "2014/01/01",
        "close": 537
      },
      {
        "date": "2014/02/01",
        "close": 529
      },
      {
        "date": "2014/03/01",
        "close": 528
      },
      {
        "date": "2014/04/01",
        "close": 516
      },
      {
        "date": "2014/05/01",
        "close": 549
      },
      {
        "date": "2014/06/01",
        "close": 575
      },
      {
        "date": "2014/07/01",
        "close": 594
      },
      {
        "date": "2014/08/01",
        "close": 589
      },
      {
        "date": "2014/09/01",
        "close": 570
      },
      {
        "date": "2014/10/01",
        "close": 555
      },
      {
        "date": "2014/11/01",
        "close": 578
      },
      {
        "date": "2014/12/01",
        "close": 569
      }
    ]
}

Answer 1

将数据重新绑定到路径...

svg.select(".area").datum(data[current_year]);
svg.select(".line").datum(data[current_year]);

...并在过渡之前计算xScale域：

xScale.domain([d3.min(data[current_year], function(d) { return d.date; }), d3.max(data[current_year], function(d) { return d.date; })]);

以下是更新的plunker：https://plnkr.co/edit/xBAR5LaDL8iifjlPdgeF?p=preview

链接转换数据问题

1 个答案: