我正在使用 d3 创建一个图表,在 y 轴上有两个刻度,一个向左,另一个向图表右侧。
在左侧 Y 轴上,我试图绘制收入与日期,在右侧我试图绘制点击次数与日期。
收入的最大值是 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);
}
有人可以帮助我如何让橙色线适合同一个 y 域吗?