问题描述
我正在试图创建一个折线图,它将有多个y轴,但公共x轴使用d3,可以somebod提供我的例子如何用D3库创建它。应该是如下所示的内容
I am triying to create a line chart which will have multiple y axis but a common x axis using d3, can somebod provide me the example how to create it with D3 library. It should be something like as shown below
推荐答案
很简单:只绘制2个图表,但只添加一个x轴,这里是一个小提琴, :
Quite simply: Just draw 2 charts but only append one x-axis, here's a fiddle to get you started: http://jsfiddle.net/henbox/fg18eru3/1/
在本例中,我假设两个不同的数据集具有不同的y域,但是具有相同的x域。如果不是这样,你应该从两个集合的组合x域中获取最大值和最小值。
In this example, I've assumed that the two different datasets have different y-domains but the same x-domain. If that's not the case, you should just get the max and min from the combined x-domains of both sets.
如果你先定义2 g
元素,将包含两个图表,并将底部图表向下转换,以使它们不重叠:
If you start by defining 2 g
elements that will contain the two charts, and transforming the bottom chart down so they don't overlap:
var topchart = svg.append("g").attr("class", "topchart");
var bottomchart = svg.append("g").attr("class", "bottomchart")
.attr("transform", "translate(0," + height/2 + ")");
...然后附加路径
y轴到适当的 g
,但只添加x轴到底部图表:
... then append the path
and y-axis to the appropriate g
, but only add the x-axis to the bottom chart:
bottomchart.append("g")
.attr("class", "axis x-axis")
.attr("transform", "translate(0," + (height/2 - padding) + ")")
.call(xAxis);
这篇关于如何创建堆叠折线图D3,多个Y轴和公共X轴的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!