Как правильно связать переходы в d3?

Вдохновленный этим другим вопросом, я создал анимация (jsfiddle), которая рисует круг, а затем линию, соединяющую его с другим кругом. Я читал, что D3 v3 не нужно прослушивать событие end для перехода в цепочку.

введите здесь описание изображения

Приведенный ниже код работает, но как его реорганизовать, чтобы он не использовал события end?

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);
    });
});

javascript d3.js transitions
person nachocab    schedule 11.10.2014    source источник
comment
Определенно потеряете конечный шаблон проектирования. Вместо этого используйте selectAll или выберите элементы, которые вы хотите связать. Просто запустите одно обновление, за которым следует другое, и снова делайте выбор при каждом обновлении. См.: bl.ocks.org/mbostock/3903818.   -  person Union find    schedule 12.10.2014

Ответы (1)


arrow_upward
2
arrow_downward

Хорошо, благодаря комментариям я понял, что могу просто сделать это:

  • добавить первый элемент и создать первый переход с помощью t0 = svg.transition(),
  • добавьте второй элемент и создайте второй переход (который сработает после окончания t0) t1 = t0.transition()
  • повторить для третьего элемента t2 = t1.transition()

Обратите внимание, что если вы хотите изменить продолжительность каждого перехода, это необходимо сделать при его определении. Это не правильно:

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);
person nachocab    schedule 12.10.2014
comment
Ага. Это довольно просто. Конец только все усложняет. - person Union find; 13.10.2014