2017-12-27 7 views
0

나는 질문을 해결할 수 있었다 : Uncaught TypeError: Cannot read property 'showBarChart' of undefined in ReactNVD3 툴팁 버그

var that = this; 
chart.tooltip.contentGenerator(function (d) { 
     var html = "<div>"; 
     d.series.forEach(function(elem){ 
     Object.keys(data_obj).forEach(function(key_1) { 
      var outer_obj = data_obj[key_1]; 
      if (outer_obj["key"] === elem.key) { 
       that.showBarChart(elem.key); 
       var expr = outer_obj["values"][0]["expr"]; 
       html += "<p>" + elem.key + "</p>"; 
       html += "<p>x = " + d.value + ", y = " + elem.value + "</p>"; 
      } 
     }); 
     }) 
     html += "</div>"; 
     return html; 
    }); 

그러나,이 솔루션은 nvd3tooltipmouse out에 사라지지 않는 scatterChart에 매우 이상한 버그에지도를 그냥 페이지에 남아 .

enter image description here

내가 그것을 어떻게

을 을 고칠 수

?

답변

0

componentDidUpdatecreateScatterChart으로 전화를 걸었습니다. 나는 그것을 주석 처리하고 잘 작동하기 시작했다. - 왜 반응과 NVD3를 사용하는 것이 아니라 D3의 특정 구현 반응 Trace why a React component is re-rendering

componentDidMount() { 
this.createScatterChart() 
} 

componentDidUpdate() { 
//this.createScatterChart() 
} 

Calling this.setState() within the component. This will trigger the following component lifecycle methods shouldComponentUpdate > componentWillUpdate > render > componentDidUpdate

+0

내가 꼭 부탁했습니다 내가 질문에 설명 할 발견 분명히 때문에 React 워크 플로우의 일이되었다 ? – jeznag

+0

React-D3 라이브러리를 보내 주시겠습니까? NVD3을 사용하면 코드 작성 횟수가 줄어들 수 있으므로 작업량을 줄이려고합니다. 솔직히 말해서, 나는 완전히 확신하지 못합니다. 그러나 그것은 제가 지금 생각하고있는 것입니다. –

+1

https://emeeks.github.io/semiotic/#/semiotic/examples http://nivo.rocks/#/ https://uber.github.io/react-vis/ HTTP : //formidable.com/open-source/victory/gallery/ – jeznag