새로운 데이터로 d3 차트 업데이트하기

Question

an example of a chart on jsFiddle에는 여러 줄의 여러 그룹이 있습니다. 그것은 성공적으로 그려지지만 새로운 데이터 세트로 전환 할 수 있기를 바랍니다.

예제는 4 초 후에 새 데이터로 업데이트해야합니다. 차트가 호출 되더라도 (그리고 콘솔에서 무언가를 출력해도) 행은 업데이트되지 않습니다.

나는 행운이없는 기존의 간단한 예제를 기반으로 다양한 변형을 시도했습니다. 그 중첩 된 데이터 based on this SO answer 그 평소보다 더 나를 혼란스럽게 생각합니다.

는 SO, 그래서 여기에 내가 대답에 약간의 코드를 가지고 주장 내가 추가/뭔가 변경해야 가정 어디 :

svg.transition().attr({ width: width, height: height }); 
    g.attr('transform', 'translate(' + margin.left +','+ margin.right + ')'); 

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

    lines.selectAll("path.line.imports") 
     .data(function(d) { return [d.values]; }) 
     .enter().append("path").attr('class', 'line imports'); 

    lines.selectAll('path.line.imports') 
     .data(function(d) { return [d.values]; }) 
     .transition() 
     .attr("d", function(d) { return imports_line(d); }); 

    // repeated for path.line.exports with exports_line(d). 

Answer 1

문제는 당신이 최상위 g 요소를 결정하고있는 방법이다 그 모든 항목이 추가됩니다 :

var g = svg.enter().append('svg').append('g'); 

이것은 입력 선택 만 처리 할 때 SVG가없는 경우에만 설정됩니다. 존재하는 경우 g은 비어 있으므로 아무 일도 일어나지 않습니다. 해결하려면 명시 적으로 나중에 g을 선택

var g = svg.enter().append('svg').append('g').attr("class", "main"); 
g = svg.select("g.main"); 

전체 데모 here을.