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

Question

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

Answer 1

非常简单：只绘制2个图表，但只附加一个x轴，这里有一个小提琴可以帮助你入门：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);