NVD3 工具提示错误

Posted 2023-02-22

【中文标题】NVD3 工具提示错误

【英文标题】：NVD3 tooltip bug

【发布时间】：2018-06-08 12:29:10

【问题描述】：

我解决了这个问题：Uncaught TypeError: Cannot read property 'showBarChart' of undefined in React

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;
    );

但是，当tooltip 没有在mouse out 上消失并且只是停留在页面上时，该解决方案导致nvd3 scatterChart 中出现一个非常奇怪的错误。

我该如何解决？

【参考方案1】：

问题是在componentDidUpdate 中我打电话给createScatterChart。我评论了它，它开始工作正常。这显然是因为React 工作流程，我发现在问题中有所描述：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

【讨论】：

我想问一下 - 为什么你使用带有 React 的 NVD3 而不是 D3 的 React 特定实现？

你能发一些 React-D3 的库吗？我认为如果我使用 NVD3，我编写的代码可能会更少，所以我试图做更少的工作。老实说，我并不完全确定，但这就是我现在的想法。

emeeks.github.io/semiotic/#/semiotic/examples nivo.rocks/# uber.github.io/react-vis formidable.com/open-source/victory/gallery