[D3.js] 長條圖

最近在研究 D3.js，他主要是用 svg 來製作可以互動的圖表，網站上有很多範例可以參考，懂得基本的運作原理外其實就有很多圖表可以應用，要能夠自己做出各種很炫的圖表的話就需要花一些時間去研究就是了。

直接用範例說明

view plaincopy to clipboardprint

1. //Width and height   
2. var w = 600;   
3. var h = 250;   
4. //資料   
5. var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,   
6.                 11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];   
7.   
8. var xScale = d3.scale.ordinal()   
9.                 .domain(d3.range(dataset.length))   
10.                 .rangeRoundBands([0, w], 0.05);   
11.   
12. var yScale = d3.scale.linear()   
13.                 .domain([0, d3.max(dataset)])   
14.                 .range([0, h]);   
15.   
16. //產生 SVG 物件   
17. var svg = d3.select("body")   
18.             .append("svg")   
19.             .attr("width", w)   
20.             .attr("height", h);   
21.   
22. //產生長條途   
23. svg.selectAll("rect")   
24.    .data(dataset) //讀入資料   
25.    .enter()   
26.    .append("rect")   
27.    .attr("x", function(d, i) {   
28.         return xScale(i);   
29.    })   
30.    .attr("y", function(d) {   
31.         //預設原點是左上角, 需要靠高度減掉y座標長條圖才會由下往上長   
32.         return h - yScale(d);    
33.    })   
34.    .attr("width", xScale.rangeBand())   
35.    .attr("height", function(d) {   
36.         return yScale(d);   
37.    })   
38.    .attr("fill", function(d) {   
39.         return "rgb(0, 0, " + (d * 10) + ")";   
40.    })   
41.    .on("click", function(d) {   
42.         console.log(d);   
43.    });   
44.   
45. //Create labels   
46. svg.selectAll("text")   
47.    .data(dataset)   
48.    .enter()   
49.    .append("text")   
50.    .text(function(d) {   
51.         return d;   
52.    })   
53.    .attr("text-anchor", "middle") //設定文字格式   
54.    .attr("x", function(d, i) {   
55.         return xScale(i) + xScale.rangeBand() / 2;   
56.    })   
57.    .attr("y", function(d) {   
58.         return h - yScale(d) + 14;   
59.    })   
60.    .attr("font-family", "sans-serif")   
61.    .attr("font-size", "11px")   
62.    .attr("fill", "white");   

加一些互動

view plaincopy to clipboardprint

1. //Width and height   
2.             var w = 600;   
3.             var h = 250;   
4.                
5.             var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,   
6.                             11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];   
7.   
8.             var xScale = d3.scale.ordinal()   
9.                             .domain(d3.range(dataset.length))   
10.                             .rangeRoundBands([0, w], 0.05);   
11.   
12.             var yScale = d3.scale.linear()   
13.                             .domain([0, d3.max(dataset)])   
14.                             .range([0, h]);   
15.                
16.             //Create SVG element   
17.             var svg = d3.select("body")   
18.                         .append("svg")   
19.                         .attr("width", w)   
20.                         .attr("height", h);   
21.   
22.             //Create bars   
23.             svg.selectAll("rect")   
24.                .data(dataset)   
25.                .enter()   
26.                .append("rect")   
27.                .attr("x", function(d, i) {   
28.                     return xScale(i);   
29.                })   
30.                .attr("y", function(d) {   
31.                     return h - yScale(d);   
32.                })   
33.                .attr("width", xScale.rangeBand())   
34.                .attr("height", function(d) {   
35.                     return yScale(d);   
36.                })   
37.                .attr("fill", function(d) {   
38.                     return "rgb(0, 0, " + (d * 10) + ")";   
39.                })   
40.                .on("mouseover", function(d) {   
41.   
42.                     //Get this bar's x/y values, then augment for the tooltip   
43.                     var xPosition = parseFloat(d3.select(this).attr("x")) + xScale.rangeBand() / 2;   
44.                     var yPosition = parseFloat(d3.select(this).attr("y")) / 2 + h / 2;   
45.   
46.                     //Update the tooltip position and value   
47.                     d3.select("#tooltip")   
48.                         .style("left", xPosition + "px")   
49.                         .style("top", yPosition + "px")                        
50.                         .select("#value")   
51.                         .text(d);   
52.                   
53.                     //Show the tooltip   
54.                     d3.select("#tooltip").classed("hidden", false);   
55.   
56.                })   
57.                .on("mouseout", function() {   
58.                   
59.                     //Hide the tooltip   
60.                     d3.select("#tooltip").classed("hidden", true);   
61.                        
62.                })   
63.                .on("click", function() {   
64.                     sortBars();   
65.                });   
66.   
67.             //Define sort order flag   
68.             var sortOrder = false;   
69.                
70.             //Define sort function   
71.             var sortBars = function() {   
72.   
73.                 //Flip value of sortOrder   
74.                 sortOrder = !sortOrder;   
75.   
76.                 svg.selectAll("rect")   
77.                    .sort(function(a, b) {   
78.                         if (sortOrder) {   
79.                             return d3.ascending(a, b);   
80.                         } else {   
81.                             return d3.descending(a, b);   
82.                         }   
83.                     })   
84.                    .transition()   
85.                    .delay(function(d, i) {   
86.                        return i * 50;   
87.                    })   
88.                    .duration(1000)   
89.                    .attr("x", function(d, i) {   
90.                         return xScale(i);   
91.                    });   
92.   
93.             };