如何创建堆叠折线图D3，多个Y轴和公共X轴 [英] How to create Stacked Line Chart D3, Multiple Y Axis and common X Axis

问题描述

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

I am triying to create a line chart which will have multiple y axis but a common x axis using d3, can somebod provide me the example how to create it with D3 library. It should be something like as shown below

推荐答案

很简单：只绘制2个图表，但只添加一个x轴，这里是一个小提琴， ： http://jsfiddle.net/henbox/fg18eru3/1/

Quite simply: Just draw 2 charts but only append one x-axis, here's a fiddle to get you started: http://jsfiddle.net/henbox/fg18eru3/1/

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

In this example, I've assumed that the two different datasets have different y-domains but the same x-domain. If that's not the case, you should just get the max and min from the combined x-domains of both sets.

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

If you start by defining 2 g elements that will contain the two charts, and transforming the bottom chart down so they don't overlap:

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轴到底部图表：

... then append the path and y-axis to the appropriate g, but only add the x-axis to the bottom chart:

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

这篇关于如何创建堆叠折线图D3，多个Y轴和公共X轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！