■ 表示させる方法
[1] HTMLのtitle属性を用いた方法 => とりあえず表示させるなら、これでOK [2] CSSとマウスイベントを用いた方法 => マウスイベントは、イベント設定が可能な on() を利用する
補足：jQuery 'tipsy' を用いた方法について
http://blog.qaramell.com/hunzy/2121にある「jQuery 'tipsy' を用いた方法」だが、IE11ではうまく表示されなかった
関連記事
* tipsy については、以下の関連記事を参照のこと。http://blogs.yahoo.co.jp/dk521123/35486224.html
jQuery 'tipsy' を用いたサンプル
http://bl.ocks.org/ilyabo/1373263http://cpettitt.github.io/project/dagre-d3/latest/demo/hover.html
http://bl.ocks.org/mccannf/1629644
http://bl.ocks.org/Matthew-Weber/5484861
[1] HTMLのtitle属性を用いた方法
サンプル
<html> <head> <meta charset="UTF-8"> <style> </style> </head> <body> <script src="">http://d3js.org/d3.v3.js"> <script> var dataset = [ {graphLegend:"001", graphValue:10, graphColor:"LightPink"}, {graphLegend:"002", graphValue:20, graphColor:"LightCyan"}, {graphLegend:"003", graphValue:30, graphColor:"LightGoldenrodYellow"}, {graphLegend:"004", graphValue:25, graphColor:"Aquamarine"}, {graphLegend:"005", graphValue:10, graphColor:"MistyRose"} ]; var width = 960, height = 500, radius = Math.min(width, height) / 2; var arc = d3.svg.arc() .outerRadius(radius - 10) .innerRadius(0); var pie = d3.layout.pie() .sort(null) .value(function(d) { return d.graphValue; }); var tooltip = d3.select("body") .append("div") .style("position", "absolute") .style("z-index", "20") .style("visibility", "hidden"); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); var g = svg.selectAll(".arc") .data(pie(dataset)) .enter().append("g"); // ★以下の2行だけ★ g.append("title") .text(function(d){ return d.data.graphLegend + " : " + d.data.graphValue; }) g.append("path") .attr("d", arc) .style("fill", function(d) { return d.data.graphColor; }) // アニメーション効果 .transition() .duration(1000) // 1秒間でアニメーションさせる .attrTween("d", function(d){ var interpolate = d3.interpolate( { startAngle : 0, endAngle : 0 }, { startAngle : d.startAngle, endAngle : d.endAngle } ); return function(t){ return arc(interpolate(t)); } }); g.append("text") .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; }) .attr("dy", ".35em") .style("text-anchor", "middle") .text(function(d) { return d.data.graphLegend; }); </script> </body> </html>
[2] CSSとマウスイベントを用いた方法
サンプル
http://blogs.yahoo.co.jp/dk521123/35450750.htmlのサンプルの例2にツールチップをつける
<!DOCTYPE html> <html> <head> <script src="">http://mbostock.github.com/d3/d3.v2.js"> <title>Sample Stacked Bar Chart</title> <style> .axis text { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } // ★ここ★ div.tooltip { position: absolute; text-align: center; width: 60px; height: 28px; padding: 2px; font: 12px sans-serif; background: lightsteelblue; border: 0px; border-radius: 8px; /* pointer-events: none; This line needs to be removed */ } </style> </head> <body> <script type="text/javascript" > function buildStackedBarChart(chartDataset) { var index = chartDataset[0].length; while (index--) { var positive = 0; var negative = 0; chartDataset.forEach(function(datum) { datum = datum[index]; datum.size = Math.abs(datum.y); if (datum.y <0) { datum.y0 = negative; negative -= datum.size; } else { datum.y0 = positive = positive + datum.size; } }) } chartDataset.extent= d3.extent(d3.merge(d3.merge(chartDataset.map(function(datum) { return datum.map(function(d) { return [d.y0, d.y0 - d.size]})})))); return chartDataset; } var dataset = [ [{y:3},{y:6},{y:-3}], [{y:4},{y:-2},{y:-9}], [{y:10},{y:-3},{y:4}] ]; var height = 500; var width = 500; var margin = 10; var colors = d3.scale.category10(); var xScale = d3.scale.ordinal() .domain(['abc','abc2','abc3']) .rangeRoundBands([margin, width - margin], .1) var yScale = d3.scale.linear() .range([height - margin, 0 + margin]); var xAxis = d3.svg.axis().scale(xScale).orient("bottom").tickSize(6, 0); var yAxis = d3.svg.axis().scale(yScale).orient("left"); // ★ここ★ var tooltip = d3.select("body") .append("div") // declare the tooltip div .attr("class", "tooltip") // apply the 'tooltip' class .style("opacity", 0); // set the opacity to nil buildStackedBarChart(dataset); yScale.domain(dataset.extent); svg = d3.select("body") .append("svg") .attr("height", height) .attr("width", width) svg.selectAll(".series") .data(dataset) .enter() .append("g") .classed("series", true) .style("fill", function(d, i) { return colors(i); }) .selectAll("rect") .data(Object) .enter() .append("rect") .attr("x", function(d, i) { return xScale(xScale.domain()[i]); }) .attr("y", function(d) { return yScale(d.y0)}) .attr("height", function(d) { return yScale(0) - yScale(d.size)}) .attr("width", xScale.rangeBand()) // ★ここ★ .on("mouseover", function(d) { tooltip.transition() .duration(500) .style("opacity", 0); tooltip.transition() .duration(200) .style("opacity", .9); tooltip.html( "<a href='#'>" + d.y + "</a><br/>") .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 5) + "px"); tooltip.style("visibility", "visible"); }) .on("mousemove", function(d){return tooltip.style("top", (event.pageY-20)+"px").style("left",(event.pageX+10)+"px");}) .on("mouseout", function(d){ return tooltip.style("visibility", "hidden");}); svg.append("g") .attr("class", "axis x") .attr("transform", "translate (0, " + yScale(0) + ")") .call(xAxis) svg.append("g") .attr("class", "axis y") .attr("transform", "translate (" + (xScale(margin) - 10) + ", 0)") .call(yAxis) </script> </body> </html>
参考文献
http://blog.qaramell.com/hunzy/2121サンプル
折れ線グラフhttp://bl.ocks.org/d3noob/c37cb8e630aaef7df30d
棒グラフ
http://bl.ocks.org/Caged/6476579
積み上げ縦棒グラフ
http://ordinary-programming.blogspot.jp/2014/03/d3js.html
