javascript - 故障排除 : D3 line transition is really jerky. 需要remove()？

Question

我有一个包含 159 条线的折线图。当图表首次加载时，我希望它们全部绘制为直线，y=5。这样可行。然后我希望他们能够完美地过渡到坎坷的 self 。

嗯，我该死的过渡很不稳定，不漂亮。我认为我需要在这里的某个地方使用remove()。

图在这里。忽略下拉菜单；它们不是原始负载的一部分。 http://bl.ocks.org/greencracker/raw/f37dc463afa15bf17d91/

我认为关键部分可能在这里:

var line = d3.svg.line()
.interpolate("basis")
    .x(function (d) {return x(d.date); })
    .y(function (d) {return y(d.rate) ; });

var flat_line = d3.svg.line()
    .interpolate("basis")
    .x(function (d, i) {return x(d.date); })
    .y(function (d) {return y(5) ; });

然后再往下看:

function lineAnimate(selection) {  // selection must be paths
    selection.transition().duration(1150).ease("linear")
    .attr("d", function (d) {return line(d.values);})
    .style("opacity", 1)
   .style("stroke", "red")
}

var counties = svg.selectAll(".county")
    .data(data, function (d) {return d.key;})
   .enter().append("g")
    .attr("class", function (d) {return d.key + " " + d.wia + " county";})  
    .text(function (d) {return d.key});

 counties.append("path")
    .attr("class", function (d) {return d.key + " " + d.wia + " county" + " line";})
    .attr("id", function (d) {return "a" + d.wia;})
    .attr("d", function (d) {return flat_line(d.values); }) // flat line y=5
    .attr("stroke", "gray")
    .attr("stroke-width", "1px")
    .style("opacity", 0.0)

counties.selectAll("path.line")
    .call(lineAnimate)

Answer 1

同时制作 159 条线的动画需要做大量工作，而且可能没什么可做的。

但是，SVG 渲染器由于必须确定所有这些重叠的半透明线的结果填充而进一步陷入困境。我怀疑如果取消不透明度的更改，您可以获得显着的提升。

最后，您也许可以通过交错动画来改进“线条变形”动画；即第一行将在第二行之前开始(并完成)其动画，然后是第三行，依此类推。这样，只有一部分行在任何给定点进行动画处理。

您可以通过在 .transition() 调用后添加类似 .delay( function(d, i) { return i * 100; }) 的内容来实现此目的。但可能不是您想要的效果。只是一个想法...