Javascript 故障排除：D3线路过渡非常不平稳。需要删除（）吗？

我有一个有159行的折线图。当图形第一次加载时，我希望它们都作为一条直线绘制，y=5。这很有效。然后我想让他们漂亮地过渡到颠簸的自我

嗯，我的该死的转变是不稳定的，不漂亮。我想我需要在这里的某个地方安装一个remove（）

图表在这里。忽略下拉列表；它们不是原始负载的一部分。

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

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)

---

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

但是，SVG渲染器由于必须确定所有这些重叠半透明线的结果填充而进一步陷入困境。我怀疑如果你去掉不透明度的改变，你会得到很大的提升

最后，可以通过错开动画来改进“线变形”动画；i、 e.第一行将在第二行之前开始（并完成）其动画，然后是第三行，以此类推。这样，在任何给定点上，只有一个子集的线正在进行动画

---

您可以通过在

.transition（）

调用之后添加类似

.delay（函数（d，i）{return i*100；}）

的内容来实现这一点。可能不是你想要的效果。只是想…

啊，可能负载太大了。每行有128个数据点。我尝试了你提出的所有想法，是的，它仍然很脆弱。即使我取消线条变形，只转换不透明度，呃，这也不理想。@maggie，跳过不透明度动画（仍然保持线条变形）怎么样？这还不够改善吗？不，唉，我可以说这并没有改善多少。如果我取消不透明度并保持线条变形，它仍然太不稳定。如果我尝试你建议的延迟，我仍然没有发现任何改进。