React D3：react-d3-tooltipとreact-d3-zoomを同じチャートで使用するにはどうすればいいですか？

Question

React-d3（www.reactd3.org）を使用して、ツールチップとズームの両方のコンポーネントで折れ線グラフを作成しようとしています。

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

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

は、しかし、私は一緒に両方のコンポーネントを使用する方法を見つけ出すことはできません。

私は、単純な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> 
 
    ); 
 
    } 
 
}

役立つはずです