>

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

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

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

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

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

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

  • 답변 # 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();
        });
    
    

  • 이전 scala - 스파크에서 DataFrame의 모든 열 (중첩 StructType 및 중첩 ArrayType 포함)을 문자열로 캐스팅하는 방법
  • 다음 asp.net core - StaticFileExtensions 중 일부를 볼 수 없습니다