React D3：如何在同一个图表中使用react-d3-tooltip和react-d3-zoom？

Question

I am trying to create a Line Chart using React-d3 (www.reactd3.org) with both the Tooltip and Zoom components.

• https://github.com/react-d3/react-d3-tooltip
• https://github.com/react-d3/react-d3-zoom

However I cannot figure out how to use both components together.

I was able to create a simple LineChart :

import {LineChart} from 'react-d3-basic';
import {LineTooltip, SimpleTooltip} from 'react-d3-tooltip';
import {LineZoom} from 'react-d3-zoom';

render() {
  var viewCountData = [
    {
      "date": new Date(2016, 5, 29),
      "Object1":11,
      "Object2":13,
      "Object3":16
    },
    {
      "date": new Date(2016, 5, 30),
      "Object1":23,
      "Object2":17,
      "Object3":15
    }
  ];
  var chartSeries = [
    {field: "Object1"},
    {field: "Object2"},
    {field: "Object3"}
  ];
  var x = function(d) {
    return d.date;
  };

  return (
    <LineChart
      data= {viewCountData}
      chartSeries= {chartSeries}
      x= {x}>
    </LineChart>
  );
}

and add Tooltips by replacing LineChart with LineTooltip :

<LineTooltip
  data= {viewCountData}
  chartSeries= {chartSeries}
  x= {x}>
  <SimpleTooltip />
</LineTooltip>

However I cannot figure out how to also use LineZoom . I tried nesting it inside LineTooltip

<LineTooltip ...>
  <LineZoom ...>
  </LineZoom>
</LineTooltip>

and also having both inside LineChart

<LineChart ...>
  <LineTooltip ...>
  </LineTooltip>
  <LineZoom ...>
  </LineZoom>
</LineChart>

but neither worked. Any help would be appreciated, thanks!

Answer 1

I basically modfified the zoom line example to include the voroni utility. Some quick cursory tests though show there's work to be done compatibility wise, but this should help you

 import React, {PropTypes} from 'react'; // import d3 from 'd3'; // import {LineZoom} from 'react-d3-zoom'; import { Chart, } from 'react-d3-core'; import { LineChart, series } from 'react-d3-basic'; import ZoomSet from 'react-d3-zoom/lib/inherit'; import ZoomFocus from 'react-d3-zoom/lib/utils/zoom_focus'; import CommonProps from 'react-d3-zoom/lib/commonProps'; // Tooltip import Voronoi from 'react-d3-tooltip/lib/utils/voronoi'; 

 export default class Line extends ZoomSet { constructor(props) { super(props); const { contentTooltip, margins, width, height } = this.props; this.zoomed = this.zoomed.bind(this); this.mkXDomain(); this.mkYDomain(); this.state = { xDomainSet: this.setXDomain, yDomainSet: this.setYDomain, onZoom: this.zoomed, d3EventSet: null, xRange: this.props.xRange || [0, width - margins.left - margins.right], yRange: this.props.yRange || [height - margins.top - margins.bottom, 0], xRangeRoundBands: this.props.xRangeRoundBands || { interval: [0, width - margins.left - margins.right], padding: 1 }, zoomType: 'line' }; this.mkXScale(this.setXDomain); this.mkYScale(this.setYDomain); this.state = Object.assign(this.state, { xScaleSet: this.setXScale, yScaleSet: this.setYScale }); } static defaultProps = CommonProps render() { const { xDomainSet, yDomainSet, contentTooltip } = this.state; const voroni = ( <Voronoi {...this.state} {...this.props} // onMouseOver= {(...args)=>console.log(args)} // onMouseOut= {(...args)=>console.log(args)} /> ); const focus = <ZoomFocus {...this.props} />; // console.log('state', this.state, Chart); return ( <div> <Chart {...this.props} {...this.state}> <LineChart {...this.props} {...this.state} xDomain={xDomainSet} yDomain={yDomainSet} showZoom/> {focus} {voroni} </Chart> </div> ); } }