9

半径を増減して、円にパルス効果を作成しようとしています。特定のデータセットに基づいて円を拡大および縮小したいと思います。半径を増加または減少させる遷移関数のみを取得できますが、両方を取得することはできません。

d3 は、配列内の値ごとに異なる円を自動的に作成します。配列を反復処理するときに、1 つの円の半径が拡大および縮小するようにするにはどうすればよいですか? 私がこれまでに持っているものの簡単なバージョンを以下に示します。ご協力いただきありがとうございます。

dataset = [30, 80, 150, 90, 20, 200, 180]

var svg = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h);

var circle = svg.selectAll("circle")
  .data(dataset)
  .enter()
  .append("circle");

circle
  .attr("cx", 500)
  .attr("cy", h/2)
  .attr("r", dataset[0])
  .attr("fill", "orange");
4

2 に答える 2

12

複数の DOM 要素を制御するのではなく、1 つの要素の属性を変更するため、これは一般的な D3 データ/入力/更新/終了パターンには実際には適合しません。ただし、指定どおりにトランジションを追加するループを使用すると、これを非常に簡単に行うことができます。コードは次のようになります。

dataset.forEach(function(d, i) {
    circle.transition().duration(duration).delay(i * duration)
        .attr("r", d);
});

完全な例については、こちらを参照してください。

于 2013-11-10T09:14:36.880 に答える
5

連続的にパルスする円を作成する別のオプション:

http://bl.ocks.org/chiester/11267307

于 2014-04-29T15:47:36.460 に答える