Переходы с использованием линейного графика и Rickshaw

Question

Я пытаюсь добавить переходы к линейному графику с помощью хорошей схемы диаграмм Рикши. Я новичок в d3, но мне кажется, что мне нужно будет добавить прямую линию, а затем перейти к графическим данным в функции рендеринга на Rickshaw.Graph.Renderer

Мой вопрос: есть ли что-то там, что поможет добавить некоторую анимацию в мою линейную диаграмму - возможно, переход от плоской линии - или рисовать линию слева направо.

Я видел примеры с необработанным d3, но адаптация рикши кажется сложной - или, возможно, я ударяю ее из-под неправильного угла.

Answer 1

С только d3 (я не знаю, о рикши), мы можем сделать это с помощью следующего кода:

var linePath = svg.append("path") 
    .datum(data) 
    .attr("d", line) 
    .style("fill", "none") 
    .style("stroke", "#3498db") 
    .style("stroke-width", "1px") 
    .attr("transform", "translate(150, 0)"); 

var linePathLength = linePath.node().getTotalLength(); 
linePath 
    .attr("stroke-dasharray", linePathLength) 
    .attr("stroke-dashoffset", linePathLength) 
    .transition() 
     .duration(4000) 
     .ease("linear") 
     .attr("stroke-dashoffset", 0); 

Первая часть кода нарисовать простую линию, без анимации.

Анимация установлена ​​во второй части. С помощью linePathLength мы получаем длину строки в px. Тогда штрих-dashoffset, определяющий начальную точку линии, устанавливается в 0, что позволяет нам медленно рисовать линию слева направо.

Код найден здесь http://datavis.fr/index.php?page=transition (на французском языке).