gpt4 book ai didi

d3.js - 如何创建堆叠折线图 D3、多个 Y 轴和公共(public) X 轴

转载 作者:行者123 更新时间:2023-12-05 02:22:25 24 4
gpt4 key购买 nike

我正在尝试创建一个具有多个 y 轴但使用 d3 的公共(public) x 轴的折线图,有人可以给我提供如何使用 D3 库创建它的示例。它应该如下所示

enter image description here

最佳答案

非常简单:只需绘制 2 个图表但只附加一个 x 轴,这里有一个 fiddle 可以帮助您入门:http://jsfiddle.net/henbox/fg18eru3/1/

在此示例中,我假设两个不同的数据集具有不同的 y 域但具有相同的 x 域。如果不是这种情况,您应该只从两个集合的组合 x 域中获得最大值和最小值。

如果您首先定义将包含两个图表的 2 个 g 元素,并向下转换底部图表以使它们不重叠:

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轴添加到底部图表:

bottomchart.append("g")
.attr("class", "axis x-axis")
.attr("transform", "translate(0," + (height/2 - padding) + ")")
.call(xAxis);

关于d3.js - 如何创建堆叠折线图 D3、多个 Y 轴和公共(public) X 轴,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29402112/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com