D3.js v5 制作 selection.clone 的克隆

Question

您好，是否可以在 D3 v5 中对选择克隆进行克隆？

我基本上是在使用选择克隆来制作和动画圆圈来模拟细菌分裂。 我可以多次调用 d3.select.clone ，但这只会对我调用 clone 的第一个圆圈进行重复克隆。我也希望能够制作克隆的克隆。

var svg = d3.select('svg')
    .style("width", '800px')
    .style("height", '600px');


  setInterval(function() {
    svg.append("circle")
            .attr("cx", 30)
            .attr("cy", 50)
            .attr("r", 15)
            .attr("id", "test_circle0")
            .style("fill", "red")

      d3.select("#test_circle0").clone(true).transition().attr("transform", "translate(25)").duration(1000);
      d3.select("#test_circle0").clone(true).transition().attr("transform", "translate(-25)").duration(3000);

  }, 1000);

Answer 1

您需要将初始圆的创建放在区间之外。然后你可以在里面克隆它。

要对克隆人自己做事情，你可以将select更改为selectAll

var svg = d3.select('svg')
    .style("width", '800px')
    .style("height", '600px');

svg.append("circle")
            .attr("cx", 300)
            .attr("cy", 50)
            .attr("r", 15)
            .attr("class", "test-circle")

setInterval(function() {
    
    d3.select(".test-circle").clone(true).transition().attr("transform", "translate(25)").duration(1000);
    d3.selectAll(".test-circle").clone(true).transition().attr("transform", "translate(-25)").duration(3000);

  }, 1000);

.test-circle {
    fill: red
}

<div class="chart"></div>
<script src="https://d3js.org/d3.v5.min.js"  charset="utf-8"></script>
<svg></svg>