将条形图添加到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的{​​{1}}标记。由于某种原因，此处未调用nvd3 BarChart组件（我在react文件中设置了断点），因此条形图未呈现（工具提示工作正常，除了没有条形图）绘制）。如何让它渲染？

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

任何建议都将不胜感激。

Answer 1

我稍微更改了应用程序的体系结构并最终实现了我需要的功能，但没有直接将条形图嵌入到工具提示中。如果有人知道如何实际做到这一点，请回复。现在我在工具提示出现的同时出现在侧面的条形图。我不是直接嵌入，而是调用$json = file_get_contents('https://api.the-odds-api.com/v2/sports/?apiKey=123456789'); $obj = json_decode($json); print_r($obj); $urlData = array(); foreach ($obj as $value) { $urlData[] = $value->$urlData; //Trying to get property of non-object in echo $value['sport']; //Undefined index: sport echo $value->$urlData; //Trying to get property of non-object } print_r($urlData) //Array ([0]=>[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

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