D3.js > D3-3Dの使い方

更新日 2019-10-22
広告
D3-3Dを使うと、D3.jsで3次元グラフを書くことができます。 以下は、5本の折れ線を書いて、横に(つまり、Y軸を中心として)回転させる例です。d3はバージョン5を使っています。 JavaScriptのソースコードは以下になります。
// originは図の中心座標です。
// alphaやbetaは3次元グラフの描画するときの視点の位置です。
var origin  = [400, 200], alpha = Math.PI/4, beta = 0.615472907, data = [], max = 4, min = -max, rad = Math.PI/180;

// svgタグにグラフを描くので、HTMLファイルのどこかにsvgタグがないといけません。
var svg     = d3.select('svg');
var color   = d3.scaleOrdinal(d3.schemeCategory10);

// 5つの折れ線グラフのデータをランダムに作成します。
var rn      = function(min, max){ return Math.round(d3.randomUniform(min, max + 1)()); };

d3.range(-4, 5, 2).forEach(function(i){
    // (x, y, z)の値を、7セット、配列で保持します。これが1つの折れ線になります。
    var o = [
        [ 3,      0      , i],
        [ 2, rn(min, max), i],
        [ 1, rn(min, max), i],
        [ 0, rn(min, max), i],
        [-1, rn(min, max), i],
        [-2, rn(min, max), i],
        [-3,      0      , i]
    ];
    data.push(o); // 変数dataに折れ線のデータを登録
});

// グラフの描画
function processData(data){
  var linesStrip = svg.selectAll('path').data(data);
  linesStrip
    .enter()
    .append('path')
    .merge(linesStrip)
    .attr('fill', 'none')
    .attr('stroke', function(d, i){ return color(i); })
    .attr('stroke-width', 2)
    .sort(function(a, b){ return b[0].rotated.z - a[0].rotated.z; })
    .attr('d', _3d.draw);
    
  linesStrip.exit().remove();
}

// D3-3Dのオブジェクトを作成します。
var _3d = d3._3d()
    .scale(30) // scaleは、グラフの拡大率です。
    .origin(origin)
    .shape('LINE_STRIP')
    .rotateX(alpha)
    .rotateY(beta);

var data3D = _3d(data);

processData(data);

// グラフのY軸を、一定間隔で回転させます。
setInterval(function(){
    beta += rad;
    processData(_3d.rotateY(beta)(data));
}, 40);

rotateXでxアングルをプラスにすると、x軸が時計回りに回転します。 同じくrotateYでyアングルをプラスにすると、y軸が時計回りに回転します。

広告
お問い合わせは sweng.tips@gmail.com まで。
inserted by FC2 system