使用 d3 在图表中有两个刻度答案

【问题标题】：Having two scales in chart using d3使用 d3 在图表中有两个刻度
【发布时间】：2012-04-12 23:01:43
【问题描述】：

我正在使用 d3 创建一个图表，在 y 轴上有两个刻度，一个向左，另一个向图表右侧。

在左侧 Y 轴上，我试图绘制收入与日期，在右侧，我试图绘制点击次数与日期。

Revenue 的最大值为 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 域？

【问题讨论】：

标签： javascript d3.js

【解决方案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 从数据中计算域。

【讨论】：