用标准化数据绘制使用D3.js的迷你图

Question

嗨我想绘制D3中的一组火花线。

我的主要问题是我想正常化数据。

所以，如果我有两个数据数组是这样的：

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

我希望能够绘制他们在彼此的顶部，因为我不感兴趣的值之间的差异，但我很感兴趣在价值如何相互改变。要看到这一点，最好的方法是如果他们在同一个规模上相互叠加。

我已经放在一起JS小提琴开始。

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'); 

小提琴更新：http://jsfiddle.net/4KqTt/6/