缺少数据的 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/

有没有way/solution像画线一样不漏数据的画法？所以每个 "part" 跟进前一个 "part"

Answer 1

根据 Hugues Moreau 的评论，似乎无法通过单一路径实现结果，因此我为自己创建了一个解决方法。

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

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/

缺少数据的 d3 折线图转换

d3 linechart transition with missing data

javascript

animation

linechart

d3.js