Adding barchart into tooltip of scatterChart in nvd3 - react component not rendering

Question

I created a scatterChart from nvd3 and then tried to customize the tooltip the way it is described here:

nvd3 piechart.js - How to edit the tooltip?

using chart.tooltip.contentGenerator() approach:

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 }/> - tag there is discreteBarChart also from nvd3. BarChart react component is not called here (I am setting breakpoints up in that BarChart.jsx file) for some reason, so the barchart is not rendered (the tooltip is working fine, except no barchart is drawn). How to make it render?

BarChart code looks like that (already fixed): React: Pass function to a child not working

Any suggestions would be greatly appreciated.

score 0 · Answer 1 · answered Dec 28 '17 at 01:52

I changed the architecture of the app a bit and ultimately implemented what I needed, but not directly embedding barchart into the tooltip. If anyone knows how to actually do that, please, reply. For now I have barchart appearing on the side at the same time as tooltip appears. Instead of embedding directly, I am just calling a function from contentGenerator that updates the state, changing a variable neuron_name that is passed into child component BarChart, which changes it. Here is the code:

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

Here is the function showBarChart:

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

Here is what I am having in the constructor of the React component:

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: ""
     }
  }
 ...
 ...

Finally, the 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>
}

And here is a screenshot of what I got. Hovering over a new point shows a new barchart below the scatter chart:

Adding barchart into tooltip of scatterChart in nvd3 - react component not rendering

1 Answers1