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

Question

我正在嘗試使用React-d3（www.reactd3.org）創建一個折線圖，其中包含Tooltip和Zoom組件。

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

但我無法弄清楚如何既組件一起使用。

我能夠創建一個簡單的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> 
); 
} 

，並通過與LineTooltip更換LineChart添加工具提示：

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

但我無法弄清楚如何還使用LineZoom。我試着築巢這裏面LineTooltip

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

，並且還具有內外線型圖

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

但既不工作。任何幫助將不勝感激，謝謝！

Answer 1

我基本上修改了縮放線的例子以包含voroni實用程序。 一些快速粗略的測試，雖然顯示有做兼容性明智的工作，但是這應該可以幫助您

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