D3.js 누적 막 대형 차트 선택

Question

일부 D3 개념을 이해하려고 노력하고 있지만 지식에 근본적인 차이가있는 것처럼 느낍니다. 은 D3 stack() 함수의 작동 방식과 관련하여으로 보입니다.

다음 두 코드 조각이 이 아니고이 아닌 이유를 이해하려고합니다. 첫 번째 작업은 데이터를 채우고 두 번째 작업은 수행하지 않습니다.

먼저 (작업 코드, 간체) :

var mainStack = d3.stack().keys(keys); 
var seriesData = mainStack(dataset[0]); 

gBars = g.selectAll("g") 
     .data(seriesData, function (d, i) { return (i); }) 
     .enter().append("g").. more work here 

초 (작동하지 않음, Simplifed) :

var mainStack = d3.stack().keys(keys); 
var seriesData = mainStack(dataset[0]); 

gBars = g.selectAll("g") 
     .data(seriesData, function (d, i) { return (i); }); 

gBars.enter().append("g").. more work here 

는 기본적으로, 난 그냥 (그것을 간단하게하기 위해 코드를 침입하려고 한 나를 위해) 읽기, 또한 exit() 함수를 구현할 수 있도록 허용합니다. 그러나 위의 작업을 수행 할 때 그래프가 표시되지 않습니다.

gBar 변수가 이전 선택을 유지해야한다고 생각 했습니까?

도움이 될만한 점은, 간단한 차트에이 패턴을 성공적으로 사용했기 때문에 d3.stacked() 함수가 데이터를 중첩하는 데 관련되어있을 때 이것이 누락 된 것과 관련이 있다는 의심 때문입니다.

Answer 1

친절한 도움으로 v4가 핸들을 선택하는 방식에 차이가 있음을 발견했습니다. 대답은 병합을 활용하여 다양한 선택을 결합한 다음 병합 된 노드에서 결합 된 모든 업데이트를 수행하는 것이 었습니다.

예 :이 다른 사람이 혼란을 조금 도움이

var mainStack = d3.stack().keys(keys); 
var seriesData = mainStack(dataset[0]); 

var gBarsUpdate = g.selectAll("g") 
    .data(seriesData, function (d, i) { return (i); }); 

var gBarsEnter = gBarsUpdate.enter().append("g") 

var gBars = gBarsEnter.merge(gBarsUpdate) 

//now update combined with common attributes as required 
gBars.attr("fill", "#ff0000"); //etc 

희망. 나에게 무슨 일이 벌어지는 지 이해할 시간이 조금 있었지만, 영리한 사람들 덕분에 그들은 나를 올바른 방향으로 이끌었다 :-)

ps. 내 문제는 결국 stack() 함수와 아무 관련이 없습니다.