3つのグラフ間でズームレベルを同期します

Question

私のページには3つのグラフコンポーネントがあります。彼らは線グラフを描きます、10回の測定をしましょう。各グラフはスクロールホイールでズームイン/ズームアウトできます。グラフコンポーネントはイベント関数のプロパティーonZoomを公開しています。そのため、たとえばハンドラをconsole.logとバインドすると、ズームが発生したときにコンソールに出力が表示されますが、問題はありません。コンソールで出力される値は、xが何グラフから表​​示されるべきかを表すの値の配列を表します（ドメイン）。

他の2つのグラフに同じズームレベルを設定したいとします。これを行うには、refプロパティを使ってグラフコンポーネントを作成し、後で.zoom()をドメインに渡す必要があります。その結果、新しいズームを設定するには、this.refs.myChart.zoom(domain)のような名前を呼び出す必要があります。

私はreduxを使用しています。ズームを変更すると「ズーム」イベントが表示され、ストアが変更され、そのストア値は3つのグラフのそれぞれzoomDomainにバインドされています新しいズームレベル（ドメイン）をプロパティとして正しく設定しました。

他のグラフのズームレベルを更新/設定するには、refs.myChart.zoom(this.props.zoomDomain)に電話をかける方法と場所を理解できません。

私がrender()に行った場合、render()に何もしてはならないというエラーが表示されますので、どうすればいいですか？

P.S.私がグラフに使用するライブラリはreact-c3js

Answer 1

です。正しく理解しているように、基本コンポーネントがあります。そのコンポーネントのレンダリングメソッドには、3つのチャートがあります。

ズームが変更されたら、それを処理して残りのチャートを更新できます。あなたはスライダー（つまり、ズームを操作する）を持っている場合、ここで

はサンプルコードです：ここで

class Base extends React.Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
      from: 0, 
      to: 1 
     }; 
    } 

    handleChange(from, to) { 
     this.refs.chartOne.zoom(nextProps.from, nextProps.to); 
     this.refs.chartTwo.zoom(nextProps.from, nextProps.to); 
     this.refs.chartThree.zoom(nextProps.from, nextProps.to); 

     this.setState({ from, to }); 
    } 

    render() { 
     return (
      <div> 
       <Chart ref="chartOne" /> 
       <Chart ref="chartTwo" /> 
       <Chart ref="chartThree" /> 

       <Slider onChange={this.handleChange.bind(this)} /> 
      </div> 
     ); 
    } 
} 

は、サンプルコードであれば、あなたのチャートのサポートzoomプロパティ：

class Base extends React.Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
      zoom: { 
       from: 0, 
       to: 1 
      } 
     }; 
    } 

    handleChange(from, to) { 
     this.setState({ zoom: {from, to} }); 
    } 

    render() { 
     return (
      <div> 
       <Chart zoom={this.state.zoom} /> 
       <Chart zoom={this.state.zoom} /> 
       <Chart zoom={this.state.zoom} /> 

       <Slider onChange={this.handleChange.bind(this)} /> 
      </div> 
     ); 
    } 
}