Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
const React = require(‘react’);
const ReactDOM = require(‘react-dom’);
const MyTooltipComponent = require('my-tooltip-component');
class MyGraphComponent extends React.Component {
componentDidMount() {
this.drawChart();
}
shouldComponentUpdate() {
return false;
}
componentWillUnmount() {
ReactDOM.unmountComponentAtNode(this.tooltipTarget);
}
drawChart() {
/*
D3 code to create our visualization by appending onto this.svg
*/
// At some point we render a child, say a tooltip
const tooltipData = ...
this.renderTooltip([50, 100], tooltipData);
}
render() {
return (
<div>
<div ref={(elem) => { this.tooltipTarget = elem; }} />
<svg ref={(elem) => { this.svg = elem; }}>
</svg>
</div>
);
}
renderTooltip(coordinates, tooltipData) {
const tooltipComponent = (
<MyTooltipComponent
coordinates={coordinates}
data={tooltipData} />
);
ReactDOM.render(tooltipComponent, this.tooltipTarget);
}
}
@klairetan

This comment has been minimized.

Show comment Hide comment
@klairetan

klairetan Mar 3, 2018

Cool example! I might be missing something, but I was wondering how this would allow the chart to update in response to changes in its data?

Cool example! I might be missing something, but I was wondering how this would allow the chart to update in response to changes in its data?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment