Ступенчатый переход в многострочном графике

Я новичок здесь и в d3.js/JavaScript в целом. Я хотел бы добавить переход к многострочному графику, чтобы каждая строка (и связанная с ней метка) «рисовалась» одна за другой. Мне удалось заставить это работать для первой строки (и, в меньшей степени, для всех строк одновременно), но я изо всех сил пытаюсь понять, как я могу поразить переходы. Я пытался использовать цикл for и .each() для вызова перехода через функцию, но ни один из этих подходов не добился успеха. Любая помощь будет принята с благодарностью. Соответствующая часть кода ниже. Спасибо.

var country = svg.selectAll(".country")
    .data(countries)
  .enter().append("g")
    .attr("class", "country");

var path = country.append("path")
    .attr("class", "line")
    .attr("d", function(d) { return line(d.values); })
    .style("stroke", function(d) { return color(d.country); })

var totalLength = path.node().getTotalLength();

d3.select(".line")
    .attr("stroke-dasharray", totalLength + " " + totalLength)
    .attr("stroke-dashoffset", totalLength)
  .transition()
    .duration(1000)
    .ease("linear")
    .attr("stroke-dashoffset", 0)
    .each("end", function() {
        d3.select(".label")
          .transition()
            .style("opacity", 1);
        });

var labels = country.append("text")
    .datum(function(d) { return {country: d.country, value: d.values[d.values.length - 1]}; })
    .attr("class", "label")
    .attr("transform", function(d) { return "translate(" + x(d.value.month) + "," + y(d.value.rainfall) + ")"; })
    .attr("x", 3)
    .attr("dy", ".35em")
    .style("opacity", 0)
    .text(function(d) { return d.country; });

transition d3.js linechart
person user3194692    schedule 15.01.2014    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Для этого вы можете использовать .delay() с функцией:

d3.select(".line")
  .attr("stroke-dasharray", totalLength + " " + totalLength)
  .attr("stroke-dashoffset", totalLength)
.transition()
  .delay(function(d, i) { return i * 1000; })
  .duration(1000)
  .ease("linear")
  .attr("stroke-dashoffset", 0)
  .each("end", function() {
    d3.select(".label")
      .transition()
        .style("opacity", 1);
    });
person Lars Kotthoff    schedule 15.01.2014
comment
Это именно то, что мне нужно! Я знал, что это будет что-то очень простое. Спасибо, что так быстро ответили! Теперь мне просто нужно понять, почему все строки, кроме первой, начинаются не с того места... - person user3194692; 15.01.2014
comment
Вы получаете общую длину для всех строк или только для первой строки? - person Lars Kotthoff; 15.01.2014
comment
Просто первый взгляд на это. Мне нужно, чтобы totalLength вычисляла и возвращала новое значение для каждой строки, есть идеи? Спасибо еще раз. - person user3194692; 15.01.2014
comment
Это помогло бы увидеть полный код. Возможно, вы также захотите поместить это в отдельный вопрос. - person Lars Kotthoff; 15.01.2014