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 まで。