How to create Stacked Line Chart D3, Multiple Y Ax

问题:

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

回答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/

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.

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

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