[D3.js] 長條圖



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

直接用範例說明

  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");   


加一些互動

  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.             };    

留言

熱門文章