Question

我有159行的折线图。当图表首次加载时，我希望它们全部绘制为直线，y = 5。这样可行。然后我希望他们精美地过渡到他们颠簸的自我。

嗯，我的过渡是生涩，不美丽。我想我需要在这里的某处删除（）。

图表在这里。忽略下拉;他们不是原始负载的一部分。 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渲染器进一步陷入困境。如果你不采用不透明度的变化，我怀疑你可以获得显着的提升。

最后，您可以改进＆＃34;线变形＆＃34;通过错开动画制作动画;即第一行将在第二行之前开始（并完成）其动画，然后是第三行，等等。这样，只有一部分行在任何给定点进行动画制作。

您可以在.delay( function(d, i) { return i * 100; })电话后添加.transition()之类的内容。可能不是你想要的效果。只是一个想法...

故障排除：D3线转换真的很生涩。需要删除（）？

1 个答案: