はじめに
http://blogs.yahoo.co.jp/dk521123/35523904.htmlで述べた通り、SVGオブジェクト配下にテキストを表示をする場合、\n や <br> は、改行されない。 地図上でテキストの折り返しを行う。 方法などは、上記の関連記事を参照のこと。
サンプル
http://blogs.yahoo.co.jp/dk521123/35450674.htmlで作成したサンプルコードをベースにしている
<!DOCTYPE html> <html> <head> <style> .map-info { font: bold 17px sans-serif; } </style> </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('bars', function(layer, dataset, options) { // hold this in a closure var self = this; // a class you'll add to the DOM elements var className = 'bars'; // make a D3 selection. var bars = layer .selectAll(className) .data(dataset, JSON.stringify ); var lineHeight = 20; bars .enter() .append('text') .attr("class", "map-info") .text(function(d) { return d.info; }) .call(convertNewline, self, lineHeight); }); var dataset = [ {latitude: 35.686533327621, longitude: 139.69192653894, info: 'Japan<br>Tokyo'}, {latitude: -33.873793, longitude: 151.208054, info: 'Australia<br>Sydney'}, {latitude: 41.902784, longitude: 12.496366, info: 'Italia<br>Roma'}, ]; map.bars(dataset, {barWidth: 5}); function convertNewline(texts, self, lineHeight) { texts.each(function() { var text = d3.select(this), lines = text.text().split(/<br>/).reverse(), lineCount = lines.length, i, line, y; text.text(''); for (i = 0; i < lineCount; i++) { line = lines[i]; y = i * lineHeight; text.append('tspan') .attr({ 'x': self.latLngToXY(text.datum().latitude, text.datum().longitude)[0], 'y': self.latLngToXY(text.datum().latitude, text.datum().longitude)[1] - y, }) .text(line); } }); } </script> </body> </html>