ทำการทดลองใช้งาน D3.js
ได้ศึกษาการใช้งานตาม Tutorials
https://github.com/mbostock/d3/wiki/Tutorials
เป็นการสร้าง barchart ตามตัวอย่าง Tutorials
1: <meta charset="utf-8">
2: <style>
3: .chart rect {
4: fill: steelblue;
5: }
6: .chart text {
7: fill: white;
8: font: 10px sans-serif;
9: text-anchor: end;
10: }
11: </style>
12: <svg class="chart"></svg>
13: <script src="http://d3js.org/d3.v3.min.js"></script>
14: <script>
15: var data = [4, 8, 15, 16, 23, 42]; //create data
16: //generate width and bar height
17: var width = 420,
18: barHeight = 20;
19: //scale axes x
20: var x = d3.scale.linear()
21: .domain([0, d3.max(data)])
22: .range([0, width]);
23: //create chart
24: var chart = d3.select(".chart")
25: .attr("width", width)
26: .attr("height", barHeight * data.length);
27: //create bar
28: var bar = chart.selectAll("g")
29: .data(data)
30: .enter().append("g")
31: .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });
32: //create rect
33: bar.append("rect")
34: .attr("width", x)
35: .attr("height", barHeight - 1);
36: //create text
37: bar.append("text")
38: .attr("x", function(d) { return x(d) - 3; })
39: .attr("y", barHeight / 2)
40: .attr("dy", ".35em")
41: .text(function(d) { return d; });
42: </script>
ผลที่ได้
ได้ศึกษาการวาดวงกลม สี่เหลี่ยม
ตัวอย่างโค้ดจากเว็บ
http://spalinux.com/2013/12/basic-using-d3-js-to-create-svg-circle-and-rect
1: <html>
2: <head>
3: <script src="http://d3js.org/d3.v3.min.js"></script>
4: </head>
5: <body>
6: <script>
7: // create svg
8: var svg = d3.select("body").append("svg");
9: svg.attr("width", 500)
10: .attr("height", 200);
11: // create circle
12: var circle = svg.append("circle");
13: circle.attr("cx", 80)
14: .attr("cy", 40)
15: .attr("r", 20);
16: // create rect
17: var rect = svg.append("rect");
18: rect.attr("x", 140)
19: .attr("y", 90)
20: .attr("width", 70)
21: .attr("height", 30);
22: </script>
23: </body>
24: </html>
