There's a number of posts addressing some variant of the question - and amongst the most popular suggestion was to re-design the parent-child hierarchy to align with the react principle of having a unidirectional flow of data. I am currently working with a simple app designed to make some webplots using react-vis, a relatively large plotting package that's no longer being maintained.
My issue is that the legend component and plotting components are separate, and that ideally, one would like to access some variable inside the plotting component to set basic parameters of the legend. I've scrounged up a simple component based off one of the examples from the react-vis documentation. For this example, I would like to access a variable inside HexbinSeries and just console log it onto the main app.
import React, {useEffect} from 'react';
import {XYPlot, XAxis, YAxis, HexbinSeries} from 'react-vis'
export const EasyPlot = () => {
const DATA = [
{"eruptions": 3.6, "waiting": 79},
{"eruptions": 3.6, "waiting": 79},
{"eruptions": 3.6, "waiting": 79},
{"eruptions": 1.8, "waiting": 54},
{"eruptions": 4.533, "waiting": 85}
];
useEffect(() => {
//console.log('var from HexbinSeries logged here')
})
return (
<div>
<XYPlot
width={400}
getX={d => d.waiting}
getY={d => d.eruptions}
height={400}
>
<HexbinSeries
colorRange={['orange', 'cyan']}
radius={10}
data={DATA}
/>
<XAxis />
<YAxis />
</XYPlot>
</div>
);
};
The plot should be a hexbin histogram, with one hexagon with a count of 3, and the other hexagons with a count of 1 (from the data). The actual HexbinSeries component uses d3-hexbin to construct the paths for the plot, and one can easily derive the total counts per hexagon from this construction.
The naive solution is to reproduce this process on the main app (run d3-hexbin on my dataset), and determine the counts from there. But ideally, I would like to avoid having to re-run d3-hexbin on a large dataset twice for every render, especially if this plot was to be interactive and we needed to update the legend with count.
The second naive solution was to have a global variable or some DOM element that I would manually access inside the HexbinSeries.js to alter. But this is an obviously a single-use solution.
Edit:
Another method was to have the parent pass setState to HexbinSeries as a prop. However, HexbinSeries is written in a way beyond my comprehension, and currently it does not seem to have a constructor.
