선 그래프와 Rickshaw를 사용한 전환

Rickshaw의 멋진 차트 프레임 워크를 사용하여 선 그래프에 전환을 추가하려고합니다. 나는 d3에 익숙하지 않지만 직선을 추가 한 다음 Rickshaw.Graph의 렌더 함수 내에서 그래프 데이터로 전환해야하는 것처럼 보입니다. 렌더선 그래프와 Rickshaw를 사용한 전환

내 질문에, 내 라인 차트에 일부 애니메이션을 추가하는 데 도움이됩니다. 아마도 평평한 선에서 전환하거나 왼쪽에서 오른쪽으로 선을 그립니다.

나는 원시 d3로 예제를 보았지만 인력거를 조정하는 것은 어려워 보입니다. 아니면 잘못된 각도에서 충돌하는 것일 수 있습니다. 단지 D3 (내가 인력거 모르는)와

출처

2013-06-01 marcusb

, 우리는 다음 코드를 사용하여이 작업을 수행 할 수 있습니다

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로 가져옵니다. 그런 다음 줄의 시작점을 정의하는 획 대시 오프셋은 0으로 설정되어 선을 천천히 왼쪽에서 오른쪽으로 그릴 수 있습니다.

코드는 여기에서 찾을 수 있습니다 http://datavis.fr/index.php?page=transition (프랑스어로되어 있음).

출처

2016-06-15 13:28:13

선 그래프와 Rickshaw를 사용한 전환

답변

관련 문제