サンプル
* アニメーション、なんちゃってTooltip* とっかかりとして一番いいかも
<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") // なんちゃってTooltip .on("mouseover", function(){return tooltip.style("visibility", "visible");}) .on("mouseout", function(){return tooltip.style("visibility", "hidden");}) .on("mousemove", function(d, i){ return tooltip .style("top", (event.pageY-10)+"px") .style("left",(event.pageX+10)+"px") .html("<div style='bold'> Value : " + d.data.graphValue + "</div>");}); 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>
参考文献
http://blog.qaramell.com/hunzy/6011http://webdesign-dackel.com/2015/03/26/d3js-responsive-pie-chart/
http://dev.classmethod.jp/client-side/javascript/d3-js-pie_chart/
* アニメーション効果
http://www.openspc2.org/reibun/D3.js/code/graph/pie-chart/1001/index.html
* Tooltip
http://zeroviscosity.com/d3-js-step-by-step/step-5-adding-tooltips
