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

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

所以让我们假设这是数据

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，然后调用line函数

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; })

---

试试这个：也可以使用d3.selectChanged到d3.select。但我不确定您是否了解使用联接所需的constancy Links：