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/

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

1 个答案: