
412
18 章 D3 を使った地図の作成
//
境界の色を設定する
var borderColor =
(nbviz.activeCategory === nbviz.ALL_CATS)?
'goldenrod':
nbviz.categoryFill(nbviz.activeCategory);
tooltip.style('border-color', borderColor);
var mouseCoords = d3.mouse(this); #
❶
var w = parseInt(tooltip.style('width')), #
❷
h = parseInt(tooltip.style('height'));
tooltip.style('top', (mouseCoords[1] - h) + 'px'); #
❸
tooltip.style('left', (mouseCoords[0] - w/2) + 'px');
d3.select(this).classed('active', true);
})
❶
D3
の
mouse
メソッドはピクセル単位のマウス座標を返し、この座標を使ってツールチップを配置で
きる。
❷ ツールチップボックスの計算済みの幅と高さを取得する。これは国のタイトルと受賞の文字列が収
まるように調整されている。
❸ マウス座標とツールチップボックスの幅と高さを使い、ボックスを水平方向の中央でマウスカーソ
ルのほぼ上に配置する(幅と高さにはツールチップの ...