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

Question

我正在尝试创建一个具有多个 y 轴但使用 d3 的公共(public) 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 + ")");

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

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