Reagieren D3: Wie react-d3-Tooltip und react-d3-Zoom in der gleichen Grafik verwenden?

Question

Ich versuche, ein Liniendiagramm mit React-d3 (www.reactd3.org) mit den Tooltip und Zoom-Komponenten zu erstellen.

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

Allerdings kann ich nicht herausfinden, wie die beiden Komponenten miteinander verwenden.

Ich war in der Lage, ein einfaches LineChart zu erstellen:

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

und fügen Sie Tooltips von LineChart mit LineTooltip ersetzt:

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

Allerdings kann ich nicht herausfinden, wie auch LineZoom verwenden. Ich habe versucht, es in LineTooltip

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

nisten und auch mit innen Linechart

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

aber weder gearbeitet. Jede Hilfe wäre willkommen, danke!

Answer 1

Ich habe das Zoom-Beispiel im Wesentlichen modifiziert, um das Voroni-Dienstprogramm einzuschließen. Einige schnelle oberflächliche Tests obwohl Show gibt es Arbeit Kompatibilität klug zu tun, aber das sollte Ihnen helfen,

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