2

サークルが緑に変わるのに青にならない理由を誰か教えてもらえますか? 関連するかどうかはわかりませんが、これはポリマップ上の D3 です。

  marker.append("svg:circle")
        .attr("r", 4.5)
        .transition()
        .delay(2000)
        .style("fill", "green")
        .transition()
        .delay(2000)
        .style("fill", "blue")
        ;
4

2 に答える 2

1

あなたが抱えている問題はあなたの遅れから来ています。トランジションの遅延により、指定されたミリ秒数の間アニメーションが停止しますが、Javascript の実行はまったく停止しません。したがって、2 つの遷移が同時に発生しているため、青色への遷移のみが表示されます。次のように、2 番目のトランジションを後で実行してみてください。

marker.append("svg:circle")
      .attr("r", 4.5)
      .transition()
      .delay(2000)
      .style("fill", "green")
      .transition()
      .delay(4000) // change to 4000 from 2000
      .style("fill", "blue");

ここでJSfiddle を完成させてください。

于 2014-06-18T16:39:23.477 に答える
1

transition()最初の遷移の最後に2 番目の呼び出しを行う別のソリューションを次に示します。

svg.append("circle")
    .attr("r", 100)
    .transition()
    .delay(2000)
    .style("fill", "green")
    .each("end", function() {
        d3.select(this).transition()
        .delay(2000)
        .style("fill", "blue")
    });

ドキュメントはhttps://github.com/mbostock/d3/wiki/Transitions#wiki-eachにあります。

JSFiddle (mdml の回答の Fiddle に基づく): http://jsfiddle.net/RuMdH/2/

于 2014-06-18T17:01:55.470 に答える