Open jameslaneconkling opened 7 years ago
It might be possible to simplify how Tooltip is implemented to look like so:
Tooltip
<Tooltip display={displayTooltip} body={tooltipBody} > <Chart ... /> </Tooltip>
And have it intercept mouseMove events and use d3.mouse() to detect the mouse's position in a containing element wrapping the Chart.
d3.mouse()
Might look like:
//something like mouseMoveEvent(e) { this.setState({ x: e.x, y: e.y }); this.onMouseMove(e); } render() { const { x, y } = this.state; if (this.props.display) { return ( <div onMouseMove={this.mouseMoveEvent} > <div style={{ position: 'absolute', x: x, y: y}} < {this.props.body} </div> {this.props.children} </div> ); } return <noscript /> }
This assumes passing a component as a prop isn't a bad idea.
Also, a HOC might work.
It might be possible to simplify how
Tooltip
is implemented to look like so:And have it intercept mouseMove events and use
d3.mouse()
to detect the mouse's position in a containing element wrapping the Chart.Might look like:
This assumes passing a component as a prop isn't a bad idea.
Also, a HOC might work.