将条形图添加到nvd3中scatterChart的工具提示中 - 反应组件不呈现

Question

我从scatterChart创建了一个nvd3，然后尝试按照此处描述的方式自定义工具提示：

nvd3 piechart.js - How to edit the tooltip?

使用chart.tooltip.contentGenerator()方法：

import React from 'react'
import * as d3 from 'd3';
import nvd3 from 'nvd3';
var nv = nvd3;
import BarChart from './BarChart';
class ScatterChart extends React.Component {
  constructor(props){
    super(props);
    this.createScatterChart = this.createScatterChart.bind(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) {
              var expr = outer_obj["values"][0]["expr"];
              html += "<p>" + elem.key + "</p>"
              html += "<p>x = " + d.value + ", y = " + elem.value + "</p>"
              html += "<p><BarChart datum = " + makeDatumForBarChart(expr) + "/></p>"
          }
        });
      })
      html += "</div>";
      return html;
    })

<BarChart datum = { datum }/> - 标签还有来自discreteBarChart的nvd3。 BarChart react组件在这里不被调用（我在BarChart.jsx文件中设置断点）由于某种原因，因此条形图未呈现（工具提示工作正常，除了没有绘制条形图）。如何使它渲染？

BarChart代码看起来像那样（已经修复）：React: Pass function to a child not working

任何建议将不胜感激。

Answer 1

我稍微更改了应用程序的体系结构并最终实现了我需要的功能，但没有直接将条形图嵌入到工具提示中。如果有人知道如何实际做到这一点，请回复。现在我在工具提示出现的同时出现在侧面的条形图。而不是直接嵌入，我只是调用contentGenerator中的一个函数来更新状态，更改传递给子组件neuron_name的变量BarChart，它会更改它。这是代码：

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

          // This function updates the state
              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;
    });

这是函数showBarChart：

showBarChart(neuron_name) {
    this.setState({
       neuron_name: neuron_name
    })
}

这是我在constructor组件的React中所拥有的：

class ScatterChart extends React.Component {
  constructor(props){
     super(props);
     this.createScatterChart = this.createScatterChart.bind(this);
     this.showBarChart = this.showBarChart.bind(this);
     this.state = {
         neuron_name: ""
     }
  }
 ...
 ...

最后，render：

render() {
  return <div width={500} height={500}>
          <svg ref={node => this.node = node} width={500} height=
{500}></svg>
          <BarChart datum = { 
expressionDatum.getDatumForNeuron(this.state.neuron_name) }/>
        </div>
}

这是我得到的截图。将鼠标悬停在新点上会在散点图下方显示新的条形图：