모듈 식 시각화 업데이트 방법

Question

D3의 일부 시각화를 결합한 프로젝트를 돕고 있습니다. 우리의 구체적인 예에서는 Sankey 레이아웃 시각화를 사용하여 일반 D3 원형 차트를 사용하여 파이 그래프를 생성합니다. 이것에 영향을 미치는 것은 같은 생산하는 것입니다 : 개발을 시도하고 가능한 모듈 형으로 이것을 유지하기 위해 목표로

을 따라서 매우 첫 번째 단계는 스탠드를 사용할 수있는 업데이트 파이 차트를 생성하는 것이 었습니다 혼자 또는 다른 시각화에 꽂았습니다. 이것은 현재이 같은 것을 보이는 pieObject에 encapuslated : 그것은 약간의 혼란을 가져

var pieObject = function(d, target){ 
    var pie = {}; 
    // other code to handle init 

    pie.update = function(data) { 
     // render code 
    }; 
}; 

트리 시각화에, 나는 업데이트를 처리 시작해야 할 때. 나는 그러나 기존의 노드를 처리하려면

sankey.nodes(data.nodes) 
     .links(data.links) 
     .layout(32); 

var node = svg.append("g") 
    .selectAll(".node") 
    .data(data.nodes) 
    .enter() 
    .append("g") 
    .attr("class", "node") 
    .attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; }); 
    .each(function(d) { 
     var pie = new pieObject(d, this); 
    }) 

, 나는 내가 pieObject 접근에 대해 이동하는 방법을 잘 모르겠어요 : 여기에 새로운 파이를 추가하는 방법입니까? 생각할 수있는 몇 가지 옵션이 있지만 일반적으로 일반적으로 사용되는 방법이 있는지 궁금합니다.

1. 스토어는 예를 벗어남 d

의 필드에서 조회와 배열이나 자바 스크립트 객체의 요소 d

저장합니다 pieObject에 pieObject은 내가 마련했습니다, I 옵션 # 1을 선호합니다. 하지만 JSON (예 : 새로운 JSON 요청이 기존 데이터 + 새 데이터를 반환 함)에서 전체 데이터 세트를 다시로드하므로 sankey.nodes(data.nodes).links(data.links).layout(32);을 호출하면 d에 저장된 추가 정보가 손실 될 것입니다. 목적?

내 문제를 설명하기 위해 함께 JSFiddle을 넣었습니다

편집 할 수 있습니다. 코드가 좀 긴이고 나는 아직 그렇게 모든 기능을 & 아웃을 모르는 보유하고 있지 않습니다 그러나 여기 고장의 :

• 1 ~ # 214 - Sankey 코드 트리 레이아웃을 생성

• 215- # 451 - 원형 차트에 대한 코드

• 453- # 475 - 코드는 특히 페이지

창조의 영역으로 즉를 추가 파이를 업데이트하는 방법을 알아 내려고 노력하고 있습니다. # 129- # 149

Answer 1

재사용 가능 차트에 대한 Mike Bostock의 튜토리얼부터 시작하는 것이 좋습니다. 찾는 사람 : http://bost.ocks.org/mike/chart/

특히,이 유형의 핵심은 재사용 방식으로 다른 차트/레이아웃에 차트를 삽입하기 위해 selection.call() 함수를 사용하는 것입니다. 그런 다음 삽입 된 차트를 업데이트해야하는 경우 동일한 selection.call()을 다시 수행하십시오. 다행히 그게 당신을 시작하게합니다.