เลือกว่า chart ของเราจะไปวาดอยู่ที่ไหน?
โดยจาก Tutorial ในหนังสือจะเลือกใช้เป็น body ซึ่งกราฟจะถูกวาดภายใน <body> ตรงนี้ </body> แต่ใน blog นั้นเราจำเป็นต้องสร้างพื้นที่ในการวาดกราฟขึ้นมาเองโดยใช้ <div id="chart"> </div> โดย chart นั้นก็คือชื่อที่เราตั้งไว้และเราไปกำหนดใน code ว่าเราจะไปวาดใน chart ตาม code ตัวอย่างด้านล่าง (บรรทัดที่ 17)
ตัวอย่างการวาด Pie Chart อย่างง่าย
- <script src="http://d3js.org/d3.v3.min.js"></script>
- <div align="center" id="chart"></div>
- <script type="text/javascript">
- //Width and height
- var w = 300;
- var h = 300;
- var dataset = [10, 10, 10, 10, 10];
- var outerRadius = w / 2;
- var innerRadius = 0;
- var arc = d3.svg.arc()
- .innerRadius(innerRadius)
- .outerRadius(outerRadius);
- var pie = d3.layout.pie();
- //Easy colors accessible via a 10-step ordinal scale
- var color = d3.scale.category10();
- //Create SVG element
- var svg = d3.select("#chart")
- .append("svg:svg")
- .attr("width", w)
- .attr("height", h);
- //Set up groups
- var arcs = svg.selectAll("g.arc")
- .data(pie(dataset))
- .enter()
- .append("g")
- .attr("class", "arc")
- .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")");
- //Draw arc paths
- arcs.append("path")
- .attr("fill", function(d, i) {
- return color(i);
- })
- .attr("d", arc);
- //Labels
- arcs.append("text")
- .attr("transform", function(d) {
- return "translate(" + arc.centroid(d) + ")";
- })
- .attr("text-anchor", "middle")
- .text(function(d) {
- return d.value;
- });
- </script>
จากโค้ดตัวอย่างจะเห็นได้ว่าเราเลือกพื้นที่วาดกราฟบน #chart และเราสร้าง <div id="chart"></div> ไว้สำหรับวาดกราฟทำให้เราสามารถ post กราฟโดยใช้ D3.js ไว้บน blog ของเราได้ :')
ผลลัพธ์ที่ได้
ปล. ชื่อ chart สามารถเปลี่ยนเป็นอะไรก็ได้โดยชื่อใน <div id="???"></div> และใน d3.select("#???") ต้องเหมือนกัน . . . *
No comments:
Post a Comment