D3：我可以根據列表中的項目進行svg轉換嗎？

Question

我想列一個清單......

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

...並根據每個列表項在屏幕上轉換元素。 例如，我想首先發送一個點到[100,100]，[200,100]，[300,100]。 有沒有辦法通過數據加入來做到這一點？

現在，我有一個可行的解決方案，但它的工作原理似乎是一種非常不正確的D3方式：使用計數器迭代列表，並且不使用數據綁定。 排除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

使用它作為參考： https ： //bl.ocks.org/mbostock/1125997

我不相信這是最好的方法，因為它仍然依賴於外部變量count ，這不是很多D3。

注意data的數組結構。

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++;
      });

對於funsies，一個包含多個圓圈的示例，每個圓圈都有自己的路徑。

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

Answer 2

是的，您可以根據數組中的數據輸入/追加圓圈，然后根據它的數據設置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;});