javascript - 将条形图添加到 nvd3 中 scatterChart 的工具提示中 - react 组件未渲染

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 调用一个更新状态的函数，更改传递到子组件 BarChart 的变量 neuron_name ，这会改变它。这是代码:

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

这是我在 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() {
  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>
}

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