d3.jsでチャートを作る パイチャート

前回に引き続き今回もd3.jsでのチャートをまとめておく。今回はパイチャートについて。

前々回はこちら
d3.jsでチャートを作る　ラインチャートとバーチャートを２つのy軸上に描画する
前回はこちら
d3.jsでチャートを作る　ツールチップ



SFiddleはこちら

弧上に描画するためのarc()とパイ上に配置するためのpie()を用意する。それと配色用のcolor。

?

1 2 3 4 5 6 7 8 9

var arc = d3.svg.arc()              .innerRadius(50)              .outerRadius(radius);  var pie = d3.layout.pie()              .value(function (d) { return d.sales; })              .sort(null) // ソートはしない              .startAngle(-Math.PI / 3) // -60度から              .endAngle(Math.PI / 3);   // 60度まで  var color = d3.scale.category10();

データをpie()にかませて配置用のデータへと変換する。

?

1 2 3 4

var container = svg.selectAll('g')                       .data(pie(data))                       .enter()                       .append('g');

弧を描画する。

?

1 2 3 4

// 色をつけて弧を描画する   container.append('path')               .style("fill", function(d, i) { return color(i); })               .attr('d', arc);

arc.centroid()を使用すると真ん中の座標が簡単に取得できる。

?

1 2 3 4 5 6 7 8

// 真ん中に文字を描画する   container.append('text')               .attr('class', 'label value')               .attr('transform', function(d, i) {                   return 'translate(' + arc.centroid(d) + ')';               })               .attr('text-anchor', 'middle')               .text(function (d, i) { return d.value; });

弧の外側に文字を描画するには三角関数を使用して座標を算出する。またtext-anchorを角度によって変更している。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

// 外側に文字を描画する   container.append('text')               .attr('class', 'label name')               .attr('transform', function(d, i) {                   // 弧の外側を取得。パイチャートでは90度（Math.PI/2）の位置が0度計算になっているので注意。それなのでxは-する。yはSVGだと向きが逆になるので+する                   var labelR = radius + 20                       , x = labelR * Math.cos((d.endAngle - d.startAngle) / 2  + d.startAngle - Math.PI/2)                       , y = -labelR * Math.sin((d.endAngle - d.startAngle) / 2 + d.startAngle + Math.PI/2);                   return 'translate(' + x + ','+ y + ')';               })               .attr("text-anchor", function(d) {                   var angle = (d.endAngle + d.startAngle) / 2;                   return 0 < angle && angle < Math.PI ? "start" : "end";               })               .style("fill", function(d, i) { return color(i); })               .text(function(d, i) { return data[i].busho; });

d3.jsでチャートを作る ツールチップ

前回に引き続き今回もd3.jsでのチャートをまとめておく。今回はおもにツールチップ的なものについて。ツールチップ的な部分以外は前回のものとあまり大差ないため省略するので詳細は前回を参照してもらいたい。

前回はこちら
d3.jsでチャートを作る　ラインチャートとバーチャートを２つのy軸上に描画する
次回はこちら
d3.jsでチャートを作る　パイチャート



JSFiddleはこちら

X軸。今回はtimeを使用している。またrange()の指定は少しずらすために30からとなっている。

?

1 2 3 4 5 6 7 8 9 10 11 12

// x軸は日付。y軸にくっつけたくなかったので30からはじめている   var x = d3.time.scale().nice()               .domain(d3.extent(data, function (d) { return d.date; }))               .range([30, width]);   var yearMonthFormat = d3.time.format("%Y/%m");   var xAxis = d3.svg.axis().scale(x)                   .orient('bottom')                   .tickFormat(yearMonthFormat);   svg.append('g')       .attr('class', 'x axis')       .attr('transform', 'translate(0, ' + height + ')')       .call(xAxis);

ツールチップ。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

// ツールチップ   var focus = svg.append('g')           .attr('class', 'focus');   focus.append('rect')            .attr({ x: -10, y: -25, width: 105, height: 50 });   // circle   focus.append('circle')           .attr('class', 'profit')           .attr({ r: 5, cy: -15 });   focus.append('circle')           .attr('class', 'sales')           .attr({ r: 5 });   focus.append('circle')           .attr('class', 'expense')           .attr({ r: 5, cy: 15 });   // text   focus.append('text')           .attr('class', 'profit')           .style('text-anchor', 'end')           .attr({ x: 90, y: -15, dy: '.35em' });   focus.append('text')           .attr('class', 'sales')           .style('text-anchor', 'end')           .attr({ x: 90, dy: '.35em' });   focus.append('text')           .attr('class', 'expense')           .style('text-anchor', 'end')           .attr({ x: 90, y: 15, dy: '.35em' });

オーバーレイとツールチップの表示場所の指定。チャート上のどこにマウスがあっても表示したいのでオーバーレイはチャート全体を覆っている。mousemove()の冒頭でマウスの現在座標からその位置よりも左側に位置するデータをbisector()で取得している。それだけだとマウスが二つのデータ間にある場合、必ず左側のものが選ばれてしまうのでマウスとデータ間の距離を比較してツールチップを表示するべきデータを取得している。このx.invert()の使用方法はtime()でしか使用できないので注意。ordinal(), linear()の場合（linear()は違うのかも。調査していないので不明）はデータの幅とrange()、マウスの座標から当該のデータを探し出す必要がある（詳細は下記参考を参照してもらいたい）。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

// オーバーレイ   svg.append('rect')       .attr('class', 'overlay')       .attr({ width: width, height: height })       .on('mouseover', function () { focus.style('display', 'block'); })       .on('mouseout', function () { focus.style('display', 'none'); })       .on('mousemove', mousemove);     var bisectDate = d3.bisector(function (d) { return d.date; }).left       , formatValue = d3.format(",.2f")       , formatCurrency = function (d) { return formatValue(d) + '億円'; };   function mousemove() {       var x0 = x.invert(d3.mouse(this)[0])           , i = bisectDate(data, x0, 1);       if (i < data.length) {           var d0 = data[i - 1],               d1 = data[i],               d = x0 - d0.date > d1.date - x0 ? d1 : d0; // 一番近いデータを取得           focus.attr('transform', 'translate(' + (x(d.date)) + ',' + y(d.sales) + ')');           focus.select('text.profit').text(formatCurrency(d.profit));           focus.select('text.sales').text(formatCurrency(d.sales));           focus.select('text.expense').text(formatCurrency(d.sales - d.profit));       }   }

参考
Inversion with ordinal scale

d3.jsでチャートを作る ラインチャートとバーチャートを２つのy軸上に描画する

d3.js周りを調査して、簡易なチャートをいくつか作ったので後々のためにまとめておく。今回は２つのy軸上にラインチャートとバーチャートをプロットする。

他のチャートはこちら
d3.jsでチャートを作る　ツールチップ
d3.jsでチャートを作る　パイチャート



JSFiddleに動作するサンプルをあげてあるので詳細はそちらを参考にしてもらいたいが、簡単に解説しておく。なおd3.jsはdata, enterの仕組みが理解できていないと一見しても意味不明なコードになるのでチュートリアル的なものをどこかで一読されることをお勧めする。

JSFiddleはこちら

データを用意する。

?

1 2 3 4 5 6 7

var data = [       { name:'Branch A', sales: 5400, forecast: 7000 },       { name:'Branch B', sales: 2800, forecast: 4500 },       { name:'Branch C', sales: 3600, forecast: 3300 },       { name:'Branch D', sales: 1700, forecast: 4700 },       { name:'Branch E', sales: 2200, forecast: 5500 }   ];

svg要素を用意する。

?

1 2 3 4 5 6 7 8

var margin = { top: 50, right: 100, bottom: 40, left: 40 }       , width = 800 - margin.left - margin.right       , height = 300 - margin.top - margin.bottom       , svg = d3.select('#item-container').append('div').append('svg')                   .attr('width', width + margin.left + margin.right)                   .attr('height', height + margin.top + margin.bottom)                   .append('g')                   .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

X軸。ここでscaleにはordinal()を使用している。他に線形のlinear()と時系列用のtime()が使用できる。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

// x軸は文字列なのでordinalにするのとrangeRoundPointsでちょうど良い場所を取得する   var x = d3.scale.ordinal()               .domain(data.map(function (d) { return d.name; }))               .rangeRoundPoints([0, width], 0.5);   var xAxis = d3.svg.axis().scale(x)                   .orient('bottom');   svg.append('g')       .attr('class', 'x axis')       .attr('transform', 'translate(0, ' + height + ')')       .call(xAxis);      // x軸のTickの文字を斜めにする    svg.selectAll(".x text")         .attr("transform", function (d) {             return "translate(" + this.getBBox().height * -2 + "," + this.getBBox().height + ")rotate(-45)";         });

一つ目のY軸。domain()に0から売り上げと予想の最大値を指定している。またnice()でよさげにtickを調整してもらう。range()がheightから0になっているのはSVGの(0, 0)は左上をさすため。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

// 一つ目のy軸。売り上げと予想から最大値を取得する   var y = d3.scale.linear().nice()               .domain([0, d3.max(data, function (d) { return Math.max(d.sales, d.forecast); })])               .range([height, 0]);   var yAxis = d3.svg.axis().scale(y)               .orient('left')               .ticks(5);   var gy = svg.append('g')       .attr('class', 'y axis')       .call(yAxis);   // テキストを表示する   gy.append('text')       .attr('transform', 'rotate(-90)')       .attr('y', 16)       .style('text-anchor', 'end')       .text('万円');

二つ目のY軸。右端にtransform.translateで移動する。また横線を引くためにd3が追加してくれたtickのg要素があるのでそこに横線用のline要素を追加して描画している。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

// 二つ目のy軸。売り上げと予想の割合を表示する   var y2 = d3.scale.linear().nice()               .domain([0, 150])               .range([height, 0]);   var yAxis2 = d3.svg.axis().scale(y2)               .orient('right');   var gy2 = svg.append('g')       .attr('transform', 'translate(' + width + ',0)')       .attr('class', 'y2 axis')       .call(yAxis2);   // 横線を描画する   gy2.selectAll('g').filter(function(d) { return d; })       .append('line')       .attr('x1', -width)       .attr('x2', 0)       .classed('minor', true);   // テキストを表示する   gy2.append('text')       .attr('transform', 'rotate(-90)')       .attr('y', -10)       .style('text-anchor', 'end')       .text('%');

ラインチャート。二つ目のY軸で高さを算出している。

?

1 2 3 4 5 6 7 8 9

// ラインチャート。売り上げと予想の割合を表示する   var linePlaceHolder = svg.append('g');   var percentLine = d3.svg.line()               .x(function (d) { return x(d.name); })               .y(function (d) { return y2((d.sales / d.forecast) * 100); });   linePlaceHolder.append("path")                   .datum(data)                   .attr("class", "line percent")                   .attr("d", percentLine);

バーチャート。一つ目のY軸で高さを算出している。またX軸のscaleでrangeRoundPoints()を指定しているおかげでちょうど良い感じの座標が取得できている。ここらへんは色々いじってためしてもらいたい。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

// バーチャート。売り上げと予想を表示する   // bars   var bar = svg.selectAll('.bar')       .data(data)       .enter()       .append('g')       .attr('class', 'bar')       .attr('transform', function(d) { return 'translate(' + (x.rangeBand() / 2 + x(d.name)) + ',0)'; });     // 売り上げ   bar.append('rect')       .attr('class', 'sales')       .attr('x', -10)       .attr('y', function (d) { return y(d.sales); })       .attr('height', function (d) { return height - y(d.sales); })       .attr('width', 10);     // 予想   bar.append('rect')       .attr('class', 'forecast')       .attr('y', function (d) { return y(d.forecast); })       .attr('height', function (d) { return height - y(d.forecast); })       .attr('width', 10);