6

hereに示すように、単純なパス遷移を実装しようとしています。私は JavaScript も d3 の魔術師でもないので、最善を尽くしてみました。

var line = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.price); });

svg.append("path")
  .datum(data)
  .attr("class", "line")
  .attr("d", line)
  .transition().duration(next.duration||1000).delay(next.delay||0); # not right

移行を適切に機能させるにはどうすればよいですか?

4

1 に答える 1

14

d3 でパス描画アニメーションを行う 1 つの方法は、dash-array および dash-offset 属性を使用することです。

できることは、dashoffset をパスの合計の長さに設定してから、dashoffset を時間の経過とともにゼロになるまで減らすことです。これにより、描画されるパスがシミュレートされます。stroke-dasharrayおよびstroke- dashoffsetに関する SVG ドキュメントを確認してください。

概念的には、あなたがしていることはこれです：

行の長さが 4 単位 (----) であるとします。dasharray を (----,,,,) に設定しています。つまり、4 つのユニットと 4 つのスペースです。ダッシュオフセットを 4 単位に設定すると、線は表示スペースの左側に 4 単位配置されます。次に、dashoffset を 0 に減らすと、線は (-,,,,) のようになり、次に (--,,,,) のようになり、線全体が描画されるまで続きます。

var line = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.price); });

var path = svg.append("path")
                  .attr("d", line(data))
                  .classed("line", true);

var pathLength= path.node().getTotalLength();

path
  .attr("stroke-dasharray", pathLength + " " + pathLength)
  .attr("stroke-dashoffset", pathLength)
  .transition()
  .duration(2000)
  .ease("linear")
  .attr("stroke-dashoffset", 0);

-

ここの Duopixel の投稿から学びました。

于 2012-11-16T00:39:12.917 に答える