使用d3在圖表中使用兩個比例尺

Question

我正在使用d3創建一個圖表，其中y軸上有兩個比例，分別朝向左側和右側。

左Y軸我試圖繪製收入VS日期和右邊我想繪製點擊VS日期。

收入的最大值是說1800美元，點擊次數是4000. 藍線是收入線，橙色線是點擊次數。

有人可以幫助我，我怎麼能得到橙色線在同一個y域？我使用收入

代碼是：我使用的點擊次數

var y = d3.scale.linear() 
    .domain([min_y_value, max_y_value]) 
    .range([height - margin, margin]); 

var x = d3.time.scale() 
    .domain([start_date, end_date]) 
    .range([0 + margin, width - margin]); 

var color = d3.scale.category10().range(); 

var vis = d3.select("#chart") 
    .append("svg:svg") 
    .attr("width", width) 
    .attr("height", height); 

var g = vis.append("svg:g") 
    .attr("transform", "translate("+margin+",0)"); 

var line = d3.svg.line() 
    .x(function(d,i) { 
     return x(get_date(d.date)); 
    }) 
    .y(function(d) { 
     return y(d[trend]); 
    }); 

for(var i = 0; i < report.length; i++) { 
    g.append("svg:path") 
     .attr("d", line(report[i])) 
     .attr("fill", "none") 
     .attr("stroke", color[i % 10]) 
     .attr("id", "line-"+report[i][0]['offer_name']) 
     .attr("stroke-width", 2); 
} 

代碼是

var trend1 = 'clicks'; 
var max_y1_value = max_min['max_'+trend1]; 
var min_y1_value = max_min['min_'+trend1]; 
var y1_range = max_y1_value - min_y1_value; 
var y1_interval_value = Math.floor(y1_range/yticks); 

max_y1_value = max_y_value + y_interval_value; 
min_y1_value = (min_y_value - y_interval_value > 0)?(min_y_value - y_interval_value) : 0; 

var y1 = d3.scale.linear().domain([min_y1_value, max_y1_value]).range([height - margin, margin]); 
var x1 = d3.time.scale().domain([start_date, end_date]).range([0 + margin, width - margin]); 
console.log('max_y_value : '+max_y_value+' min_y_value : '+min_y_value+' max_y1_value : '+max_y1_value+' min_y1_value : '+min_y1_value+' trend1: '+trend1); 
var line1 = d3.svg.line() 
    .x(function(d,i) { 
     return x1(get_date(d.date)); 
    }) 
    .y(function(d) { 
     console.log(d[trend1]+' '+y1(d[trend1])); 
     return y1(d[trend1]); 
    }); 

for(var i = 0; i < report.length; i++) { 
    g.append("svg:path") 
     .attr("d", line1(report[i])) 
     .attr("fill", "none") 
     .attr("stroke", color[i + report.length % 10]) 
     .attr("id", "line1-"+report[i][0]['offer_name']) 
     .attr("stroke-width", 2); 
} 

Chart Image

人可以幫我？我怎樣才能橙色線適合在同一個y域？

Answer 1

看起來你用其他系列的值覆蓋了你的max_y1_value和min_y1_value。例如，首先要定義max_y1_value：

var max_y1_value = max_min['max_'+trend1]; 

再後來你用另一個值替換：

max_y1_value = max_y_value + y_interval_value; 

我建議使用d3.extent計算從數據域。