간단한 경로 전환

Question

그림과 같이 간단한 경로 전환을 구현하려고합니다. here. 난 더 자바 스크립트도 D3 마술사 해요, 그래서 난 내 최선을 주려고 노력 :

var line = d3.svg.line() 
    .x(function(d) { return x(d.date); }) 
    .y(function(d) { return y(d.price); }); 

svg.append("path") 
    .datum(data) 
    .attr("class", "line") 
    .attr("d", line) 
    .transition().duration(next.duration||1000).delay(next.delay||0); # not right 

가 어떻게 전환이 제대로 작동하려면 어떻게해야합니까?

Answer 1

d3에서 경로 그리기 애니메이션을 수행하는 한 가지 방법은 대시 배열 및 대시 오프셋 특성을 사용하는 것입니다.

대시 오프셋을 총 경로 길이로 설정 한 다음 시간이 지남에 따라 대시 오프셋이 0이 될 때까지 줄입니다. 이는 그려지는 경로를 시뮬레이션합니다. stroke-dasharray 및 stroke-dashoffset에 대한 SVG 문서를 확인하십시오.

개념적으로, 당신이하고있는 것은 이것이다 :

은 (----) 당신의 라인은 4 대 긴 말. dasharray를 (---- ,,,,) 즉 4 단위 다음 4 칸으로 설정합니다. 대시 오프셋을 4 단위로 설정하면 선이 보이는 공간의 왼쪽에 4 단위 배치됩니다. 그런 다음 dashoffset을 0으로 줄이면 전체 선이 그려 질 때까지 선이 (- ,,,,), (- ,,,)와 같이 보입니다.

var line = d3.svg.line() 
.x(function(d) { return x(d.date); }) 
.y(function(d) { return y(d.price); }); 

var path = svg.append("path") 
        .attr("d", line(data)) 
        .classed("line", true); 

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

path 
    .attr("stroke-dasharray", pathLength + " " + pathLength) 
    .attr("stroke-dashoffset", pathLength) 
    .transition() 
    .duration(2000) 
    .ease("linear") 
    .attr("stroke-dashoffset", 0); 

-Duopixel's에서 배운

는 here을 게시 할 수 있습니다.