投稿記事

d3 SVG area

27 May 2014

下のグラフの水色で塗りつぶされた領域を area と言います。

area の描画方法をメモしておきます。

// area の x点のデータを作る
var xData = [];
for (var i = 2; i <= 3; i=i+0.05) {
  xData.push(i);
};

var area02 = d3.svg.area() // areaジェネレータ
        .x(function(d,i) { return scale02X(d);})  // x座標
        .y0(function(d,i) { return scale02Y(0);}) // 下部(base)のy座標 ここでは 0
        .y1(function(d,i) { return scale02Y(Math.pow(Math.pow(d,4),-1));}); // 上部のy座標 1/x^4
    svg02.append("path") // path の追加
        .attr("d", area02(xData))
        .attr("fill", "aqua"); // 塗りつぶす

var curve032Data = []; // 0 <= t < 1
var curve033Data = []; // 1.01 <= t <= 2.3

for (var i = 0; i < 1; i=i+0.01) {
  curve032Data.push(i);
};
for (var i = 1.01; i <= 2.3; i=i+0.01) {
  curve033Data.push(i);
};


/* Areas*/
var area03 = d3.svg.area() // Area generator
        .x(function(d,i) { return scale03X(d);})
        .y0(function(d,i) { return scale03Y(0);})
        .y1(function(d,i) { return scale03Y(Math.pow(Math.log(d),-1));});

svg03.append("path") // t < 1 の path
        .attr("d", area03(curve032Data))
        .attr("fill", "blue");

svg03.append("path") // t > 1 のpath
        .attr("d", area03(curve033Data))
        .attr("fill", "blue");