0

D3 でエリア チャートを作成して、エリア チャートのフロアを (別のプロットとして) 指定することはできますか?

このようなもの：

ここに画像の説明を入力

したがって、床が常に Y=0 にあるのではなく、実際には y=1.03^X から派生したプロットです。

これは私のコードです:

var NSW = "NSW";
var QLD = "QLD";

var width = 600;
var height = 400;
var years = [];

var getStat = function(year, volatility, basis) {
    // volatility = 0.04;
    // basis = 1.11;

    return {
        d: year,
        x: basis,
        vol: volatility,
        value: 45 * Math.pow(basis, year),
        high: 45 * Math.pow(basis+volatility, year),
        low: 45 * Math.pow(basis-volatility, year),
    }
}

for(i = 0; i < 25; i++) {
    years.push(i);
}

var data = years.map(function(year){ return [getStat(year, 0.04, 1.11),getStat(year, 0.02, 1.07)]; });   // generate bogus data
var nsw = data.map(function(d) { return d[0].value;}); // extract new south wales data
var qld = data.map(function(d) { return d[1].value;}); // extract queensland data

var chart = d3.select("#chart").attr("width", width).attr("height", height).append("g");
var x = d3.scale.linear().domain([0, years.length]).range([0, width]);
var y = d3.scale.linear().domain([0, d3.max(data, function(d){ return Math.max(d[0].high, d[1].high); })]).range([height,0]);
var area = d3.svg.area().x(function(d,i) { return x(i); }).y0(height).y1(function(d, i) { return y(d); })

console.log([nsw,qld])

chart
.selectAll("path.area")
.data([nsw,qld])          // !!! here i can pass both arrays in.
.enter()
.append("path")
.attr("fill", "rgba(0,0,0,0.5)")
.attr("class", function(d,i) { return [NSW,QLD][i]; })
.attr("d", area);

そして私のHTML：

<svg id="chart"></svg>
4

1 に答える 1

2

コンテキストを理解するのに役立つ例を次に示します。

var area = d3.svg.area()
.x(function(d) { return x(d.xValue); })
.y0(height)
.y1(function(d) { return y(d.xValue^3); });

これを行うと、ベース y0 が現在のチャートのベースである完全な高さに固定されます。しかし、基本的に y0,y1 はどちらもアクセサ関数です。したがって、基本的には、データ値ごとに毎回高さを y0 に渡します。これを次のように変更すると、次のようになります。

var area = d3.svg.area()
.x(function(d) { return x(d.xValue); })
.y0(function(d){ return y(d.xValue/2);}) //FUNCTION FOR BASE-Y
.y1(function(d) { return y(d.xValue^3); }); //FUNCTION FOR TOP-Y

理想的には、面グラフのベースはそれに応じて変化します。これがあなたが試みていることを達成するのに役立つことを願っています. 解決策が期待どおりに機能しない場合は教えてください。必要に応じてフィドルを作成します。

編集:質問の変更に応じて、プロットする各領域には独自の機能が必要です。ここで、1 つまたは 2 つの領域だけに正当化される複数の領域関数を記述する必要があります。ただし、チャート全体を複数の色付き領域で塗りつぶす予定がある場合は、代わりにこの最初のd3 スタック レイアウトを使用する必要があると思います

スタック レイアウトの概念では、返されたレイアウト オブジェクトに基本的に複数の配列が含まれるようにデータを再配置します (実際の構造を理解するのが簡単になるので、マッピング用に推測する関数を記述します)。ここで、この返されたレイアウトのインスタンスごとに繰り返し呼び出すことができる単一の area 関数が必要です。各インスタンスとは、area 関数に渡されたときにさまざまな領域になるさまざまな配列を意味します。

これはこれを行う理想的な方法でした。簡単な回避策を気にしない場合は、これが私が現在行っていることです。[nsw,qld] だけでなく、[nsw1,qld1] の領域をプロットしたいとします。 、[nsw2、qld2]、......など。

iterationData = [[nsw,qld],[nsw1,qld1],[nsw2,qld2],........];
for(i in iterationData){
    chart
    .data(iterationData[i])
    .append("path")
    .attr("fill", "fixed_color_value/color_scale(category10/category20)")
    .attr("class", function(d,i) { return [NSW,QLD][i]; })
    .attr("d", area);
}

これがあなたの質問に完全に答えることを願っています。

于 2015-09-16T02:41:16.913 に答える