D3：リスト内の項目に基づいてsvgトランジションを行うことはできますか？

Question

私はリストを利用したいと思い

...

var data = [100, 200, 300] // arbitrarily long 

...と遷移各リスト項目に基づいて、画面上の要素。たとえば、最初に[100,100]、[200,100]、[300,100]に点を送りたいと思います。データ結合でこれを行う方法はありますか？

現時点では、問題の解決策はありますが、D3-ishのような方法で動作します。カウンタを使用してリストを反復し、データバインディングを使用しません。 CSSを除いて、次のコードがあります。

<svg> 
    <circle/> 
</svg> 


<script> 

var data = [100,200,300] 

var circle = d3.selectAll("circle") 
    .attr("r",20) 
    .attr("cy",100) 
    .attr("cx",0) 

var count = 0 

repeat() 

function repeat() { 
    var run = circle 
    .transition() 
    .duration(1000) 
    .attr("cx", function (d) {return data[count]}); 

    count++ 

    if (count < data.length){ 
    run 
     .each("end", repeat); 
    } 
} 

</script> 

データバインディングでこれを行う方法はありませんか？私はこれを正しい方法でやりたいと思っていますが、今のところ、これを動作させるためには私が把握できるだけのものです。

Answer 1

はい、配列内のデータに基づいて円を追加/追加した後、そのデータに基づいてcxを設定することができます。また、あなたはデータポイントのインデックスに遷移遅延を基づかことで驚異的に達成することができ、例えばhttps://jsfiddle.net/65aeo5q5/：

var circle = svg.selectAll("circle") 
    .data(data) 
    .enter() 
    .append("circle") 
    .attr("r",20) 
    .attr("cy",100) 
    .attr("cx",0) 
    .style("fill", "red") 

var delay = 1000; 

circle 
    .transition() 
    .duration(delay) 
    .delay(function (d, i) {return i * delay;}) 
    .attr("cx", function (d) {return d;}); 

Answer 2

参照としてこれを使用する：https://bl.ocks.org/mbostock/1125997

私は、これはするための最良の方法である確信していませんこれはまだ外部変数countに依存しているため、非常にD3ではありません。

dataの配列構造に注意してください。 funsies、複数の円と例えば、自分のフリーのそれぞれについて

https://jsfiddle.net/e51rzkth/4/

var data = [[[100,100],[200,100],[300,100]]] 

var svg = d3.select("body") 
    .append("svg") 
    .attr("width", 400) 
    .attr("height", 400) 

var circle = svg.selectAll("circle") 
    .data(data) 
    .enter() 
    .append("circle") 
    .attr("r",20) 
    .style("fill", "red") 

var count = 0 

circle 
    .transition() 
    .duration(1000) 
    .delay(250) 
    .on("start", function repeat() { 
     d3.active(this) 
      .transition() 
      .attr('cx', d=>d[count][0]) 
      .attr('cy', d=>d[count][1]) 
      .transition() 
      .on("start", repeat); 
      count++; 
     }); 

。

https://jsfiddle.net/e51rzkth/3/