如何创建堆叠折线图 D3、多个 Y 轴和公共 X 轴

Question

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

Answer 1

非常简单：只需绘制 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 + ")");

...然后将 path 和 y 轴附加到适当的 g，但只将 x 轴添加到底部图表：

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

如何创建堆叠折线图 D3、多个 Y 轴和公共 X 轴

How to create Stacked Line Chart D3, Multiple Y Axis and common X Axis

d3.js