缺少数据的 D3 折线图转换

Question

在我们的网站上，我们使用d3绘制动画折线图，使用以下示例创建：http://bl.ocks.org/duopixel/4063326

有时它发生在没有数据的某些点上，所以我们使用定义的方法更新图表(如以下示例：https://bl.ocks.org/mbostock/0533f44f2cfabecc5e3a(

我们现在遇到的问题是，当使用代码进行转换时：

                linePath
                .attr("stroke-dasharray", totalLength + " " + totalLength)
                .attr("stroke-dashoffset", totalLength)
                .transition()
                .duration(2000)
                .ease(d3.easeLinear)
                .attr("stroke-dashoffset", 0);

路径的每一条线都是同时绘制的，如下所示：https://jsfiddle.net/applepie89/9kknu8du/

有没有办法/解决方案可以按照它画线的方式绘制它而不会丢失数据？所以每个"部分"都遵循前一个"部分">

Answer 1

根据Hugues Moreau的评论，似乎不可能用单一路径实现结果，所以我为自己创建了一个解决方法。

一开始有一个包含数据的数组，其中包含 null 值。我创建了一个新数组并向该数组添加子数组。

var newObjectArray = [];
var duration = 2000;
var duration_per_point = duration / d.values.length;
var delay = 0;
var start = 0;
for (var j = 0; j < d.values.length; j++)
{
   if (isNaN(d.values[j].y))
   {
       var tempArray = d.values.slice(start, j);
       newObjectArray.push(tempArray );
       start = j;
    }
 }
 newObjectArray.push(d.values.slice(start, j));

对于 newObjectArray 中的每个数组，我现在绘制一条路径，并为过渡添加延迟。

linePath
    .attr("stroke-dasharray", totalLength + " " + totalLength)
    .attr("stroke-dashoffset", totalLength)
    .transition()
    .duration(duration_per_point*newObjectArray[k].length)
    .delay(delay)
    .ease(d3.easeLinear)
    .attr("stroke-dashoffset", 0);
delay += duration_per_point * newObjectArray[k].length;

JSFIDDLE： https://jsfiddle.net/9kknu8du/4/