サンプル
http://blogs.yahoo.co.jp/dk521123/35450674.htmlの続き。
例3：地図上に積み上げ棒グラフ
* 負の値も対応<!DOCTYPE html> <html> <head> </head> <body> <script src="">http://d3js.org/d3.v3.js"> <script src="">http://d3js.org/topojson.v1.min.js"> <script src="datamaps.world.js"></script> <div id="container" style="position: relative; width: 1000px; height: 800px;"></div> <script> var map = new Datamap({ scope: 'world', element: document.getElementById('container'), }); map.addPlugin('stackedBars', function(layer, dataset, options) { // hold this in a closure var self = this; // a class you'll add to the DOM elements var className = 'bars'; var dataGroup = d3.nest() .key(function(d) { return d.city; }) .entries(dataset); // make a D3 selection. var bars = layer .selectAll(className) .data(dataset, JSON.stringify); var colors = d3.scale.category20c(); var yPositionForPositiveValue = 0; var yPositionForNegativeValue = 0; dataGroup.forEach(function(d, i) { bars .enter() .append('rect') .attr('class', className) .attr('width', options.barWidth) .attr('height', 0) .attr('x', function(datum) { return self.latLngToXY(datum.latitude, datum.longitude)[0]; }) .attr('y', function(datum) { return self.latLngToXY(datum.latitude, datum.longitude)[1]; }) .style('fill', function(datum) { return colors(datum.chartIndex); }) // アニメーション効果 .transition() .delay(500) // 0.5秒遅らせる .duration(1000) // 1秒間でアニメーションさせる .ease("bounce") // bounceの動きを指定する .attr("height", function(d) { return Math.abs(d.yVal); }) .attr("y", function(datum) { if (datum.chartIndex === 0) { yPositionForPositiveValue = 0; yPositionForNegativeValue = 0; } if (datum.yVal >= 0) { // 正の値の場合 yPositionForPositiveValue = yPositionForPositiveValue + datum.yVal; return self.latLngToXY(datum.latitude, datum.longitude)[1] - yPositionForPositiveValue; } else { // 負の値の場合 var yPosition = self.latLngToXY(datum.latitude, datum.longitude)[1] + yPositionForNegativeValue; yPositionForNegativeValue = yPositionForNegativeValue + Math.abs(datum.yVal); return yPosition; } }); }); // 基軸 var ledge = 10; bars .enter() .append('line') .attr("x1", function(datum) { return self.latLngToXY(datum.latitude, datum.longitude)[0] - ledge; }) .attr("y1", function(datum) { return self.latLngToXY(datum.latitude, datum.longitude)[1]; }) .attr("x2", function(datum) { return self.latLngToXY(datum.latitude, datum.longitude)[0] + options.barWidth + ledge; }) .attr("y2", function(datum) { return self.latLngToXY(datum.latitude, datum.longitude)[1]; }) .attr("stroke", "gray") .attr("stroke-width", 1); }); var dataset = [ {city: 'Tokyo', latitude: 35.686533327621, longitude: 139.69192653894, chartIndex: 0, yVal: 15 }, {city: 'Tokyo', latitude: 35.686533327621, longitude: 139.69192653894, chartIndex: 1, yVal: 50 }, {city: 'Tokyo', latitude: 35.686533327621, longitude: 139.69192653894, chartIndex: 2, yVal: 35 }, {city: 'Sydney', latitude: -33.873793, longitude: 151.208054, chartIndex: 0, yVal: -25 }, {city: 'Sydney', latitude: -33.873793, longitude: 151.208054, chartIndex: 1, yVal: -35 }, {city: 'Sydney', latitude: -33.873793, longitude: 151.208054, chartIndex: 2, yVal: -40 }, {city: 'Roma', latitude: 41.902784, longitude: 12.496366, chartIndex: 0, yVal: 10 }, {city: 'Roma', latitude: 41.902784, longitude: 12.496366, chartIndex: 1, yVal: -20 }, {city: 'Roma', latitude: 41.902784, longitude: 12.496366, chartIndex: 2, yVal: 30 }, ]; map.stackedBars(dataset, {barWidth: 20}); </script> </body> </html>
