【 D3.js 入門系列 --- 5.1 】作一個帶座標軸和標籤的圖表

時間 2019-11-08

標籤 d3.js 入門系列 5.1 一個座標軸標籤圖表欄目 JavaScript 简体版

原文原文鏈接

前面幾節講解了圖標、座標軸、比例等等，這一節整合這些內容作一個實用的圖表。結果圖以下：javascript

代碼以下所示：html

[html] view plain copy

<html>    
  <head>    
        <meta charset="utf-8">    
        <title>Chart</title>    
  </head>   
  
<style>  
  
.axis path,  
.axis line{  
    fill: none;  
    stroke: black;  
    shape-rendering: crispEdges;  
}  
  
.axis text {  
    font-family: sans-serif;  
    font-size: 11px;  
}  
  
</style>  
    <body>    
        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>    
        <script>  
          
        var width = 600;  
        var height = 600;  
        var dataset = [];  
        var num = 15;  //數組的數量  
          
        for(var i = 0; i < num ; i++){  
            var tempnum = Math.floor( Math.random() * 50 );   // 返回 0~49 整數  
            dataset.push(tempnum);  
        }  
          
        var svg = d3.select("body").append("svg")  
                                .attr("width",width)  
                                .attr("height",height);  
          
        var xAxisScale = d3.scale.ordinal()  
                        .domain(d3.range(dataset.length))  
                        .rangeRoundBands([0,500]);  
                              
        var yAxisScale = d3.scale.linear()  
                        .domain([0,d3.max(dataset)])  
                        .range([500,0]);  
                              
        var xAxis = d3.svg.axis()  
                        .scale(xAxisScale)  
                        .orient("bottom");  
          
        var yAxis = d3.svg.axis()  
                        .scale(yAxisScale)  
                        .orient("left");  
  
        var xScale = d3.scale.ordinal()  
                        .domain(d3.range(dataset.length))  
                        .rangeRoundBands([0,500],0.05);  
                              
        var yScale = d3.scale.linear()  
                        .domain([0,d3.max(dataset)])  
                        .range([0,500]);  
          
        svg.selectAll("rect")  
           .data(dataset)  
           .enter()  
           .append("rect")  
           .attr("x", function(d,i){  
                return 30 + xScale(i);  
           } )  
           .attr("y",function(d,i){  
                return 50 + 500 - yScale(d) ;  
           })  
           .attr("width", function(d,i){  
                return xScale.rangeBand();  
           })  
           .attr("height",yScale)  
           .attr("fill","red");  
             
        svg.selectAll("text")  
            .data(dataset)  
            .enter().append("text")  
            .attr("x", function(d,i){  
                return 30 + xScale(i);  
           } )  
           .attr("y",function(d,i){  
                return 50 + 500 - yScale(d) ;  
           })  
            .attr("dx", function(d,i){  
                return xScale.rangeBand()/3;  
           })  
            .attr("dy", 15)  
            .attr("text-anchor", "begin")  
            .attr("font-size", 14)  
            .attr("fill","white")  
            .text(function(d,i){  
                return d;  
            });  
             
        svg.append("g")  
            .attr("class","axis")  
            .attr("transform","translate(30,550)")  
            .call(xAxis);  
              
        svg.append("g")  
            .attr("class","axis")  
            .attr("transform","translate(30,50)")  
            .call(yAxis);   
          
            
        </script>    
          
    </body>    
</html>

下面分別講解上面的代碼：java