多個Y軸和不同比例的路徑

Question

我有結構{time, value1, value2}中的數據。在軸x（底部），我有time，我有兩個Y軸，最小/最大值範圍爲value1和value2。我爲這個值繪製了兩條路徑。問題是因爲value1和value2不同（[25,130]和[0,65]），由於最小/最大值（.domain,d3.extent），我的第二條路徑（對於value2）被繪製在不可見區域的片段上。如何繪製分配給第二軸的value2的路徑？我不想更改域名。我希望你明白我的意思。下面的代碼和圖片。

var x = d3.time.scale() 
    .range([0, width]); 
var y = d3.scale.linear() 
    .range([height, 0]);  
var y2 = d3.scale.linear() 
    .range([height, 0]); 

var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom"); 
var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient("left"); 
var yAxis2 = d3.svg.axis() 
    .scale(y2) 
    .orient("left"); 

var line = d3.svg.line() 
    .x(function(d) { return x(d.time); }) 
    .y(function(d) { return y(d.value1); }); 

var line2 = d3.svg.line() 
    .x(function(d) { return x(d.time); }) 
    .y(function(d) { return y(d.value2); }); 

d3.json('/data.json', function(error, data){ 

     x.domain(d3.extent(data, function(d) { return d.time; })); 
     y.domain(d3.extent(data, function(d) { return d.value1; })); // [25, 130] 
     y2.domain(d3.extent(data, function(d) { return d.value2; })); // [0, 65] 


     svg.append("g") 
      .attr("class", "x axis") 
      .attr("transform", "translate(0," + height + ")") 
      .call(xAxis); 

     svg.append("g") 
      .attr("class", "y axis") 
      .call(yAxis) 
     .append("text") 
      .attr("transform", "rotate(-90)") 
      .attr("y", 6) 
      .attr("dy", ".71em") 
      .style("text-anchor", "end") 
      .text("Value1"); 

     svg.append("g") 
      .attr("class", "y2 axis") 
      .attr("transform", "translate(-40,0)") // second axis a little to the left 
      .call(yAxis2) 
     .append("text") 
      .attr("transform", "rotate(-90)") 
      .attr("y", 6) 
      .attr("dy", ".71em") 
      .style("text-anchor", "end") 
      .text("Value2"); 

     /** 
     * datum ? 
     */ 
     svg.append("path") 
      .datum(data) 
      .attr("class", "line") 
      .attr("d", line); 

     svg.append("path") 
      .datum(data) 
      .attr("class", "line2") 
      .attr("d", line2); 

}); 

Answer 1

要創建雙Y標尺，但使用同一兩條線路。限定使用所述第二刻度的第二行像這樣

var line2 = d3.svg.line() .x(function(d) { return x(d.time); }) .y(function(d) { return y2(d.value2); });