Question

我的目标是采取一系列观点，并以类似系列的方式移动它们（.transition.duration()）几次。

代码示例：

d3.csv("X.csv", function(csv) {

    // initialize circles at random positions
   svg.selectAll("circle")
                    .data(csv)
                    .enter()
                    .append("circle")
                        .attr("cx", function(d) {
                            return x(80*Math.random());
                        })  
                        .attr("cy", function(d) {
                            return y(500*Math.random());
                        })
                        .attr("r", function(d) {
                            return r(Math.sqrt(10*Math.random()));
                        })
                        .style("fill", function(d) {
                            return color(d.A);
                        })
                    .style("opacity", 1.0) 
                    .style("stroke-opacity", 1) 
                    .style("stroke-width", 3)
                    .style("stroke", function(d) {
                        return stroke(d.B) 
                    });

    // Move #1: moving the marks to their position
    svg.selectAll("circle")
        .transition().duration(2000)
        .attr("cx",function(d) {
            return x(+d.C);
        })
        .attr("cy",function(d) {
            return y(+d.D);
        })
        .attr("r",function(d) {
            return r(Math.sqrt(+d.E));
        })
        .style("opacity", 0.8);

    //Move #2: move again to highlight
    svg.selectAll("circle")
        .transition().duration(2000)
        .style("opacity", function(d) {
            if (d["A"] == "male") {
                return 0.1;
            } else if (d["A"] == "female") {
                return 0.8;
            }
        });
   }

问题：按原样运行，跳过移动＃1。

尝试失败：如果我注释掉Move＃2部分，则Move＃1有效。如果我注释掉Move＃1部分，那么Move＃2就可以了。

考虑过的想法：我用Google搜索了.delay，setTimeout()以及.exit()的其他选项以及进一步的数据绑定步骤，但我相信应该有一些东西更简单的存在。我也试图关注this SO post，但很难关注＆＃34;一般更新模式＆＃34;第一个答案的例子。

问题：如何让Move＃1和Move＃2连续工作（可能会进一步移动＃3，＃4等）？

Answer 1

优秀教程here

想法是延迟第一次过渡的持续时间。

因此，如果你有1个转换，每个转换持续1秒，那么延迟第二个1秒，第三个延迟2秒，因为我们必须等待第一个和第二个转换完成。希望你明白这一点。

var canvas = d3.select('body')
						.append("svg")
						.attr("width",500)
						.attr("height",500);
		var addcircle = canvas.append("circle")
							.attr("cx",50)
							.attr("cy",50)
							.attr("r",25);		
		
		var circles = d3.select('circle');
		
		// first transition
		circles.transition().duration(1000)
				.attr("cx",250);
		
		// 2nd
		circles.transition().delay(1000)
				.duration(1000)
				.attr("cy",250)
		// 3rd
		circles.transition().delay(2000)
				.duration(1000)
				.attr("cx",50)
		// 4th
		circles.transition().delay(3000)
				.duration(1000)
				.attr("cy",50);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

javascript d3.js - 散点图上点的多次转换

1 个答案: