如何在D3.js中使用不同的日期（或x轴数据）很好地进行路径转换

Question

我有两组数据，我想在同一行上使用并在每组数据之间进行转换但是当我这样做时，该行有一个奇怪的动画。我想简单地从之前的位置变形，但隐藏/添加没有数据/数据的部分线

所以我们说这是数据......

var allData = 
[{"date":"1/1/1950","data1":3.4,"data2":null},
{"date":"2/1/1950","data1":3.8,"data2":null},
{"date":"3/1/1950","data1":4.0,"data2":4.4},
{"date":"4/1/1950","data1":3.9,"data2":4.3}];

这是我在x轴上调用的x比例

xScaleTime
   .range([0, chartWidth])
   .domain(d3.extent(allData, function(d) { return +d.date; }));

这是行函数

var lineFunction = d3.svg.line()
.x(function(d) { return xScaleTime(d.date);});

所以我选择路径并将其传递给data1并调用行函数...

lineFunction.y(function(d) { return yScale(d[data1]);});   
d3.select(path).transition().duration(500).attr("d", lineFunction(allData));    

然后我选择路径并对data2做同样的事情......

lineFunction.y(function(d) { return yScale(d[data2]);});
d3.select(path).transition().duration(500).attr("d", lineFunction(allData));

我已经尝试在调用函数之前添加了defined（），这确实缩短了行，但是动画看起来很奇怪，好像这条线是从图表的左侧重绘而不是从我之前调用data1时的位置重绘它当我再次运行defined（），添加所有数据

时，看起来也很奇怪/不稳定

lineFunction.defined(function(d) { return d.data2 != null; })