使用共享的x轴和独立的y轴缩放多个(两个)图表

时间:2018-09-02 11:10:50

标签: javascript d3.js zoom

我有一个基本图表(股价)和下面的多个指标图表。 它们共享xAxis(时间),但具有不同的yAxis。

主要图表是画布,因此我直接使用zoom事件的变换来绘制图。

此刻,我将变换从单个图表中的zoom事件发送到父组件,该父组件将该变换发送到单个图表。

现在,我可以使用一个源事件来缩放所有图表,但是只能变换每个部分。为了使图表保持同步,我将变换应用于this.zoomRect.call(this.zoom.transform, transform)这样的缩放功能。

但是如果指标仅作为x平移/缩放的原因而不是事件的来源,我将如何继续?

更新-此示例显示了我要实现的部分功能-我们有一张具有独立轴比例的图表-轴将仅按其方向缩放主要区域。.缩放x轴将仅缩放x的主要区域-direction ..现在想象您将拥有第二个主要区域,该区域与第一个主要区域共享x轴,但在y轴上具有独立的比例。

示例: http://bl.ocks.org/jazeee/5414435213db1bee9e912a9dca83a41f

0 个答案:

没有答案