Question

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

我想在其他2个图表上设置相同的缩放级别。为了做到这一点，必须使用ref属性创建图表组件，稍后通过引用访问该属性以调用.zoom()传递域，因此在结果中我需要调用{{1}之类的内容设置新的缩放。

我正在使用this.refs.myChart.zoom(domain)，当缩放更改时，我会发出一个＆＃34; ZOOM＆＃34;事件，然后更改存储，并且该存储值在3个图中的每一个中绑定到redux prop，我可以看到每个图现在都将新的缩放级别（域）设置为属性。< / p>

现在我无法理解如何以及在何处调用zoomDomain来更新/设置其他图表上的缩放级别？

如果我在refs.myChart.zoom(this.props.zoomDomain)中执行此操作，我将收到错误消息，我不应该在render()中执行任何更改状态的操作，那么我该怎么办呢？

P.S。如果重要，我用于图表的lib是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个图表之间同步缩放级别

1 个答案: