d3js - 선 그래프의 두 데이터 포인트 간 거리 계산

Question

d3.js에 초보자입니다. 나는 선 그래프에 데이터 점을 고르게 분포시키지 않았다. 오른쪽에 새로운 점을 추가 할 때 mike's path transition tutorial과 같이 왼쪽의 마지막 데이터 점을 제거하고 싶다. 나는 축을 가지고 마지막 전이를 언급하고있다.

전환을 제공하는 동안 거리가 고르지 않기 때문에 마지막 두 데이터 포인트 사이의 거리를 계산하고 싶습니다. 마지막 두 점 사이의 총 차이점을 효과적인 전환으로 적용 할 것입니다.

예제 선 그래프. xAxes 범위 : 시간 graph http://i60.tinypic.com/2dq5xv.png

여기 1 위와 2 위는 다른 지점보다 훨씬 더 먼 거리입니다. 그래서 첫 번째 요소를 제거하는 동안 더 많이 전송해야합니다. 두 번째 지점 이후로 나는 아주 작은 거리를 통과해야합니다.

도움을 주시면 감사하겠습니다.

편집

var checkList=getCheckedList();  //getting list of parameters:here read1,read2,read3 
    updateAxes(checkList,data); 
    var t = svg.transition().duration(750); 
    t.select(".x.axis").call(xAxis); 
    t.select(".y.axis").call(yAxis); 
    var keys=KeyArray; 
    var line1; 
    for(var i=0;i<keys.length;i++) 
    { 
     if(actualKeys.indexOf(keys[i]) > -1){ 

      line1=d3.svg.line() 
      .interpolate("linear") 
      .x(function(d) { return x(d.time); }) 
      .y(function(d) { return y(d[keys[i]]); }); 

      var id="#"+keys[i]+"_line"; 
      d3.select(id).attr("d",line1(data)); //I want trasition here 
     } 
    } 

추가 JSFiddle code. 내 로컬 컴퓨터에서 잘 작동하지만 jsfiddle에는 문제가 있습니다. 버튼을 클릭하면 처음 5 개의 데이터 포인트가 새로운 5 개의 데이터 포인트로 바뀌므로 오른쪽에서 왼쪽으로 이동해야합니다.

이해할 수없는 부분이 있으면 알려 주시기 바랍니다.

Answer 1

x 축이 시간이라면 예상 UX는 현재 시간 또는 새로운 점을 기준으로 그래프를 부드럽게 스크롤하는 것입니다. 첫 번째 지점을 제거하는 것은 부차적 인 문제입니다. 목표에 대해 더 많이 알지 못하면 UX 번역은 제거되는 첫 번째 포인트를 기반으로해야한다는 것에 회의적입니다.

번역은 다음과 같습니다

var translateX = scale(lastDomainMax) - scale(newDomainMax) 

당신은 새로운 포인트 스크롤 그래서 화면에 차트를 클립합니다. 차트의 왼쪽도 마찬가지로 잘립니다. 첫 번째 점은 변환되지만 점 1과 점 2 사이의 선분은 점 2가 차트에서 벗어날 때까지 유지되어야합니다. 그로부터, 당신은 항상 차트의 왼쪽에 한 지점을 유지해야합니다.

또는 x- 도메인을 변경하여 배열의 현재 포인트의 최소/최대를 반영 할 수 있습니다. 이 경우, 포인트 1.

d3-traits가 chartLine.update('trend') 방법의 line chart 그것을 어떻게하는지 당신은 볼 수 있습니다를 제거 할 때 (7)을 통해 2 차트를 채우기 위해 수평을 확장 할 점. d3 형질은 당신이 "추세"하고있는 것을 호출합니다.