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

我从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

任何建议将不胜感激。

最佳答案

我对应用程序的体系结构进行了一些更改，最终实现了所需的功能，但没有将条形图直接嵌入工具提示中。如果有人知道该怎么做，请回复。现在，在工具提示出现的同时，我的侧面出现了条形图。我只是直接从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>
}

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

关于javascript - 在nvd3的scatterChart的工具提示中添加条形图- react 组件未渲染，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47986082/