我正在尝试使用 d3 创建一个折线图,该折线图将有多个 y 轴,但有一个公共 x 轴,有人可以为我提供如何使用 D3 库创建它的示例吗?它应该如下所示
很简单:只需绘制 2 个图表,但仅附加一个 x 轴,这里有一个小提琴可以帮助您入门:http://jsfiddle.net/henbox/fg18eru3/1/ http://jsfiddle.net/henbox/fg18eru3/1/
在此示例中,我假设两个不同的数据集具有不同的 y 域,但具有相同的 x 域。如果不是这种情况,您应该从两个集合的组合 x 域中获取最大值和最小值。
如果你首先定义 2g
将包含两个图表的元素,并将底部图表向下转换以使它们不重叠:
var topchart = svg.append("g").attr("class", "topchart");
var bottomchart = svg.append("g").attr("class", "bottomchart")
.attr("transform", "translate(0," + height/2 + ")");
...然后附加path
和 y 轴到适当的g
,但仅将 x 轴添加到底部图表:
bottomchart.append("g")
.attr("class", "axis x-axis")
.attr("transform", "translate(0," + (height/2 - padding) + ")")
.call(xAxis);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)