다중 회선 그래프 업데이트 D3.js

Question

PHP를 사용하여 mySQL 데이터베이스에서 5 초 간격으로 데이터를 가져 와서 d3 다중 선 그래프를 업데이트하려고합니다. 지금은 그래프가 표시되고 있지만 업데이트되지는 않습니다. 저는 updateData 함수가 올바르지 않다고 생각합니다. 그러나 모든 것을 시도해 보았지만 아무것도 작동하지 않습니다. 아무도 도와 줄 수 있습니까?

https://gist.github.com/Majella/ab32fe0151fd487da3f6

UPDATE : 당신은 X 축선은 산발적으로 표시되고, 선의 일부는 Y 축으로 늘어서되지시피

.

업데이트 요점 :

https://gist.github.com/Majella/ab32fe0151fd487da3f6

업데이트 2 : 일부 기괴한 이유로 선 색상을 변경 - 또는 완전히 이해하지는 이동. 따라서 위의 그래프에서 위쪽 - 파란색, 주황색, 흰색 - 파란색을 업데이트하는 그래프가 맨 아래에 주황색, 가운데에서 흰색으로 바뀔 수 있지만 임의로 발생합니다.

그래프의 원본 도면에서

Answer 1

, 올바르게 사용 요소에 데이터 (데이터)를 결합

var parameter = svg.selectAll(".parameter") 
.data(data, function(d) { return d.key; }) 
    .enter().append("g") 
    .attr("class", "parameter"); 

(g.parameter를)

하여 업데이트 기능하는 동안, 당신이 필요합니다 요소의 업데이트, 삭제 및 추가를 수행하기 위해 데이터를 다시 조인 할 수 있습니다. 3 little circles tutorial은 이에 대해 더 자세히 알기 좋은 곳입니다.

// re-acquire joined data 
var containers = svg.selectAll("g.parameter") 
    .data(data); 

// update existing elements for this data 
containers 
    .select("path.line") 
    .attr("d", function(d) { return line(d.values); })