<!DOCTYPE html> <head> <meta charset="utf-8" /> <title>Test10_D3.js</title> <!-- d3.js的引用要放在Header內 --> <script src="d3/d3.min.js"></script> </head> <body> <div id="div1"></div> <!-- D3.js的Scropt語法要放在Body內 --> <script> //新增一個SVG,並設定長、寬 var svg = d3.select("body").append("svg") .attr("width", 800) .attr("height", 800) .append("g") .attr("transform", "translate(400,400)") var color = d3.scale.ordinal() .range(["#abc5c5","#89a68a","#6b5488","#00456c","#aa4400","#6aa560"]); var dd = [ {v:10,t:"甲"},{v:20,t:"乙"},{v:30,t:"丙"},{v:40,t:"丁"},{v:50,t:"戊"} ]; var arc1 = d3.svg.arc() .outerRadius(150) .innerRadius(0); var pie1 = d3.layout.pie() .sort(null) .value(function(d) { return d.v; }); var g1 = svg.selectAll("g") .data(pie1(dd)) .enter() .append("g") ; g1.append("path") .attr("d", arc1) .attr("style" ,"fill:none;stroke:black;stroke-width:1;" ) .style("fill", function(d) { return color(d.data.v); }) ; //顯示文字 var t1 = g1.append("text") .text(function(d) { console.log(arc1.centroid(d),"arc1.centroid"); return d.data.t; }) .attr("transform", function(d) { console.log(arc1.centroid(d),"arc1.centroid"); return "translate(" + arc1.centroid(d) + ")"; }) .attr("text-anchor", "middle") .attr("fill","red") .attr("font-size","20px"); //用on綁定事件,指定滑鼠click事件,並撰寫function()來回應click事件 //除了click之外,還有mousedown、mouseup、dblclick、mouseover等 g1.on('click', function () { //mouse會傳回x、y的值,型態是陣列:[x,y] x = d3.mouse(this)[0]; y = d3.mouse(this)[1]; console.log(x,y); //讓文字變顏成綠色,並且放大字體 d3.select(this).select("text") .attr("fill","green") .attr("font-size","30px"); }); </script> </body> </html>
