Question

我已经查看了有关链接/重复转换的所有示例（例如http://bl.ocks.org/mbostock/1125997），但我无法使用我的示例。

我尝试无数次重新过渡，但不知何故，当第一个过渡结束时，三个圆圈的位置会发生变化。我的目标是将圈子的起始位置称为转换结束并一次又一次地运行转换......

这是我的代码。

var margin = {top: 30, right: 20, bottom: 30, left: 50},
    width = 800 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var svg = d3.select("body")
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom);

var dataset = [20, 100, 180];

var circle = svg.selectAll("circle")
                   .data(dataset)
                   .enter()
                   .append("circle")
                       .attr("cx", function(d) { return d; })
                       .attr("cy", function(d) { return d; })
                       .attr("r", 5)
                    .transition()
                        .duration(2000)
                        .attr("cx", function(d) {return d + 80; })
                        .attr("cy", function(d) {return d + 80; })
                        .each("end", repeat)
                        .remove();


function repeat(){

    var circle = svg.selectAll("circle")
                   .data(dataset)
                   .enter()
                   .append("circle")
                       .attr("cx", function(d) { return d; })
                       .attr("cy", function(d) { return d; })
                       .attr("r", 5)
                    .transition()
                        .duration(2000)
                        .attr("cx", function(d) {return d + 80; })
                        .attr("cy", function(d) {return d + 80; })
                        .each("end", repeat)
                        .remove();


};

这是我的工作示例： https://jsfiddle.net/RudiSophieson/1vkwkbks/2/

提前致谢。

Answer 1

在重复功能中，您不需要再次附加圆圈。你只需要更新cx和cy。

var circle = svg.selectAll("circle")
                        .attr("cx", function(d) { return d; })
                   .attr("cy", function(d) { return d; })
                   .attr("r", 5)
                .transition()
                    .duration(2000)
                    .attr("cx", function(d) {return d + 80; })
                    .attr("cy", function(d) {return d + 80; })
                    .each("end", repeat)
                    .remove();

工作代码here

重复（链接）转换D3js

1 个答案: