하나의 svg 요소에 다양한 유형의 nvd3 차트를 동적으로 만들려고합니다 (주로 차트 유형을 즉시 전환하기 때문에). 이렇게하기 위해 차트 유형을 변경할 때마다 내 svg-Element의 모든 자식을 삭제하고 새 차트를 추가합니다.크기 조정 이벤트가 호출 될 때 NVD3이 svg에 오래된 차트를 추가합니다.
이 모든 것이 훌륭합니다. 내 창 크기를 조정하고 nv.utils.windowResize을 통해 chart.update으로 전화하면 문제가 발생합니다. 이상한 이유로이 과정에서 이전 차트가 DOM에 다시 추가되고 2 개의 차트가 표시됩니다.
여기 효과의 사진이다 : Plunker : 여기 
는 행동 예시 plunker이다. 버튼을 클릭하여 차트 유형을 선에서 막대로 변경하고 미리보기 창 크기를 조정하면됩니다.
누구든지이 문제를 해결하기 전에 시도 할 수있는 문제가 있습니까?
도움을 주셔서 감사합니다.
차트를 신고하는 방식에 문제가있는 것처럼 보입니다. let 연산자는 블록 범위 지정을 사용하므로 원래 코드 :
if(that.useLine) {
let chart = nv.models.lineChart();
} else {
let chart = nv.models.discreteBarChart();
}
은 작동하지 않습니다. 차트는 if 블록 내에서만 정의됩니다. 당신은 (참고 차트를 폐쇄 외부 선언) 대신에이 작업을 수행 할 수 있습니다
private addGraph(): void {
let that = this;
let chart;
nv.addGraph(() {
d3.selectAll(`svg > *`).remove();
if(that.useLine) {
chart = nv.models.lineChart();
} else {
chart = nv.models.discreteBarChart();
}
let myData = that.testData();
d3.select('#chart svg')
.datum(myData)
.call(chart);
//Update the chart when window resizes.
nv.utils.windowResize(function() { chart.update() });
return chart;
});
}
그것은 아마 변수 차트 마지막에서 남은 된 폐쇄 문제입니다. nv.utils.windowResize (this.chart.update)를 수행해 보셨습니까? 문제를 보여주는 전체 jsFiddle을 게시하면 도움이됩니다. 차트를 추가하는 다른 인스턴스를 보지 않고 무슨 일이 벌어지고 있는지 말해주기가 어렵습니다. – jeznag
@jeznag 플 런커 링크로 제 질문을 업데이트했습니다! 고맙습니다 :) –