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

Question

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

Answer 1

很简单：只需绘制 2 个图表，但仅附加一个 x 轴，这里有一个小提琴可以帮助您入门：http://jsfiddle.net/henbox/fg18eru3/1/

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

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

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);