Question

嗨，有可能在D3 v5中克隆选择克隆吗？

我基本上是使用选择克隆来制作和动画化圆圈，以模拟细菌分裂。我可以多次调用d3.select.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>

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

1 个答案: