在d3中链接转换的正确方法是什么? [英] What is the correct way of chaining transitions in d3?

问题描述

受此其他问题的启发 ，我创建了一个动画( jsfiddle )，该动画绘制了一个圆，然后将其连接到另一个圆上.我读到D3 v3不需要监听end事件到链转换.

Inspired by this other question, I created an animation (jsfiddle) that draws a circle, then a line that connects it to another circle. I read that D3 v3 doesn't need to listen the the end event to chain transitions.

下面的代码有效，但是我应该如何重构它而不使用end事件?

The code below works, but how should I refactor it so it doesn't use end events?

var margin = {top: 40, bottom: 40, left: 40, right: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.bottom - margin.top;

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

var t0 = svg.append("circle")
    .attr("r", 0)
    .attr("cx", 40)
    .attr("cy", 40)
    .attr("class", "point")
  .transition()
    .duration(500)
    .attr("r", 4);

var t1 = t0.each("end", function(){ 
    var t2 = svg.append("path")
        .style("stroke", "#000")
        .style("stroke-width", 2)
        .style("fill", "none")
        .attr("d", "M40,40L40,40")
      .transition()
        .ease("linear")
        .duration(500)
        .attr("d", "M40,40L80,80");

    t2.each("end", function(){ 
        svg.append("circle")
            .attr("r", 1)
            .attr("cx", 80)
            .attr("cy", 80)
            .attr("class", "point")
          .transition()
            .duration(500)
            .attr("r", 4);
    });
});

推荐答案

好，感谢我的评论，我意识到我可以做到这一点:

Ok, thanks to the comments I realized I can just do this:

• 附加第一个项目，并使用t0 = svg.transition()创建第一个过渡，
• 追加第二项并创建第二个过渡(将在t0结束后触发)t1 = t0.transition()
• 重复第三项t2 = t1.transition()

• append the first item and create the first transition with t0 = svg.transition(),
• append the second item and create the second transition (which will trigger after t0 ends) t1 = t0.transition()
• repeat for the third item t2 = t1.transition()

请注意，如果要更改每个过渡的持续时间，则必须在定义过渡时进行.这是错误的:

Note that if you want to change the duration of each transition, it must be done when you define it. This is wrong:

var t1 = t0.transition()
    .ease("linear");
t1.select("path.line")
    .duration(500)
    .attr("d", "M40,40L80,80");

应该是:

var t1 = t0.transition()
    .ease("linear");
    .duration(500)
t1.select("path.line")
    .attr("d", "M40,40L80,80");

这是最终代码( jsfiddle ):

var margin = {top: 40, bottom: 40, left: 40, right: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.bottom - margin.top;

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

svg.append("circle")
    .attr("r", 0)
    .attr("cx", 40)
    .attr("cy", 40)
    .attr("class", "point-start")

svg.append("path")
    .style("stroke", "#000")
    .style("stroke-width", 2)
    .style("fill", "none")
    .attr("class", "line")
    .attr("d", "M40,40L40,40");

svg.append("circle")
    .attr("r", 0)
    .attr("cx", 80)
    .attr("cy", 80)
    .attr("class", "point-end")

var t0 = svg.transition()
    .duration(100);

t0.select("circle.point-start")
    .attr("r", 4);

var t1 = t0.transition()
    .duration(500)
    .ease("linear");
t1.select("path.line")
    .attr("d", "M40,40L80,80");

var t2 = t1.transition()
    .duration(100);
t2.select("circle.point-end")
    .attr("r", 4);

这篇关于在d3中链接转换的正确方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！