홈>2020-03-18 17:51

angular - 크기 조정 이벤트가 호출되면 NVD3에서 오래된 차트를 svg에 추가합니다

하나의 svg 요소에 다른 유형의 nvd3 차트를 동적으로 만들려고합니다 (주로 차트 유형을 즉시 전환하려고하기 때문에). 이를 위해 차트 유형을 변경할 때마다 svg-Element의 모든 자식을 삭제하고 새 차트를 추가합니다.

이것은 모두 잘 작동합니다. 문제는 내가 창 크기를 조정하고 chart.update 를 호출 할 때 발생합니다. nv.utils.windowResize 를 통해 . 이상한 이유로이 프로세스 중에 이전 차트가 DOM에 다시 추가되고 2 개의 차트가 표시됩니다.

효과의 사진은 다음과 같습니다.

다음은 행동을 가진 플런저의 예입니다 : Plunker . 버튼을 클릭하여 차트 유형을 선에서 막대로 변경하고 미리보기 창 크기를 조정하면됩니다.

아무도 전에이 문제가 있었거나이 문제를 해결하려고 할 수있는 것을 알고 있습니까?

도움을 주셔서 감사합니다!

angularnvd3.js

답변 # 1

차트를 선언하는 방식에 문제가있는 것 같습니다. 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;
  });
}

https://plnkr.co/edit/pwiO8FCpGyd2JLG4hllW?p=preview

답변 # 2

사용자 정의 콜백 함수를 nv.utils.widowResize 에 전달하여이 문제를 해결할 수있었습니다. 방법. 차트 크기를 조정하면 여러 번 삭제하고 다시 작성하기 때문에 스트로브로 표시되지만 다른 방법을 찾지 못했습니다.

   var removeChart = function(element) {
        d3.select(element).selectAll('*').remove();
        d3.selectAll('.nvtooltip').style('opacity', '0');
    };
    nv.utils.windowResize(function() {
        // chartElement is a reference to the chart's <svg> element
        removeChart(chartElement);
        chart.update();
    });

Python2.net

angular - 크기 조정 이벤트가 호출되면 NVD3에서 오래된 차트를 svg에 추가합니다

관련 자료