在 3 个图形之间同步缩放级别

Question

我的页面上有 3 个图形组件。他们根据 10 次测量绘制线图。每个图形都可以通过滚轮缩放 in/out。图表组件公开了一个事件函数属性 onZoom，因此如果我使用 console.log 将处理程序绑定到它，例如，当发生任何缩放时我可以在控制台中看到输出，没问题。控制台中输出的值表示一个 [from, to] 值数组，表示从什么 x 到什么 x 现在必须显示的图形（域）。

我想在其他 2 个图表上设置相同的缩放级别。为了做到这一点，必须使用 ref 属性创建图形组件，稍后通过引用访问以调用 .zoom() 传递域，所以结果我需要调用 this.refs.myChart.zoom(domain) 之类的东西来设置新的缩放比例。

我正在使用 redux 并且当缩放更改时我发送一个 "ZOOM" 事件，然后更改存储，并且该存储值绑定到 3 个图中每个的 zoomDomain prop ，我可以看到每个图表现在都有新的缩放级别（域）正确设置为属性.

现在我不明白我需要如何以及在哪里调用 refs.myChart.zoom(this.props.zoomDomain) 才能 update/set 缩放其他图表上的级别？

如果我在 render() 中这样做，我会得到一个错误，我不应该在 render() 中做任何改变状态的事情，那么我该如何做呢？

P.S. 如果重要的话，我用于图形的库是 react-c3js

Answer 1

据我了解，您有一个 Base 组件。在该组件的渲染方法中，您有 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>
        );
    }
}

在 3 个图形之间同步缩放级别

Synchronize zoom level between 3 graphs

javascript

reactjs

react-redux