D3.js 入门系列 --- 5.1 做一个带坐标轴和标签的图表

Posted 2020-08-06 冷雨恋晴

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了 D3.js 入门系列 --- 5.1 做一个带坐标轴和标签的图表相关的知识，希望对你有一定的参考价值。

前面几节讲解了图标、坐标轴、比例等等，这一节整合这些内容做一个实用的图表。结果图如下：

技术分享

代码如下所示：

<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>

下面分别讲解上面的代码：

31 - 34 行：随机生成数据，赋于数组
36 - 38 行：定义 svg
40 - 54 行：定义坐标轴的 scale （比例）和坐标轴，48行为 x 轴，52行为 y 轴
56 - 62 行：定义柱形图的 scale
64 - 78 行：绘制柱形图，注意 scale 的使用
80 - 98 行：绘制文字标签，同样注意 scale
100 - 108 行：绘制坐标轴

注意：绘制的时候，要注意绘制的顺序，否则可能会把某些需要的东西覆盖掉。尤其是坐标轴，最好放到最后绘制。

本文来自：

博客为： www.ourd3js.com

csdn博客为： blog.csdn.net/lzhlzz

转载请注明出处，谢谢。

以上是关于 D3.js 入门系列 --- 5.1 做一个带坐标轴和标签的图表的主要内容，如果未能解决你的问题，请参考以下文章

D3.js 入门系列 --- 5 如何添加坐标轴

D3.js 入门系列 — 11 入门总结

D3.js 入门系列 — 0 简介和安装

D3.js 入门系列 --- 1 第一个程序HelloWorld

D3.js 入门系列 --- 8 对话操作（事件）