javascript - 使用 D3.js 和标准化数据绘制迷你图

Question

嗨，我正在尝试在 D3 中绘制一组 Spark 线。

我的主要问题是我想标准化数据。

因此，如果我有两个这样的数据数组:

var wind = [1, 8,3,4]
var powerGenerated = [50, 40,20,30]

我希望能够将它们绘制在彼此之上，因为我对值之间的差异不感兴趣，但我对值之间的关系如何变化感兴趣。看到这一点的最佳方法是将它们以相同的比例绘制在彼此之上。

我已经组装了一个 JS fiddle 来开始。

http://jsfiddle.net/redenvy/4KqTt/2/

Answer 1

您必须创建两个单独的 yScale，一个用于风数据，另一个用于发电数据。

var wind = [1, 8,3,4]
var power = [50, 40,20,30]

var w = 200, h = 80;
var yWind = d3.scale.linear().domain([d3.min(wind), d3.max(wind)]).range([0 , h]),
    yPower = d3.scale.linear().domain([d3.min(power), d3.max(power)]).range([0 , h]),
x = d3.scale.linear().domain([0, wind.length]).range([0, w])

var vis = d3.select("#sparklines")
    .append("svg:svg")
    .attr("width", w)
    .attr("height", h)

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

var lineWind = d3.svg.line()
    .x(function(d,i) { return x(i); })
    .y(function(d) { return -1 * yWind(d) });

var linePower = d3.svg.line()
    .x(function(d,i) { return x(i); })
    .y(function(d) { return -1 * yPower(d); });

g.append("svg:path").attr("d", lineWind(wind)).attr('class', 'wind');
g.append("svg:path").attr("d", linePower(power)).attr('class', 'power');

fiddle 更新:http://jsfiddle.net/4KqTt/6/