1

こんにちは、D3 で一連のスパーク ラインをプロットしようとしています。

私の主な問題は、データを正規化したいということです。

したがって、次のようなデータの配列が 2 つある場合:

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

値の違いには興味がありませんが、値が互いにどのように変化するかに興味があるため、それらを重ねてプロットできるようにしたいと考えています。これを確認する最良の方法は、それらを同じ縮尺で重ねてグラフ化した場合です。

開始するためにJSフィドルをまとめました。

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

4

1 に答える 1

1

風力データ用と発電データ用の 2 つの個別の 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/

于 2013-04-25T03:15:24.640 に答える