用標準化數據繪製使用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/