Data visualization D3 charting (c) add the axis

Axis

axisLeft () scale to the left
axisRight () scale to the right
axisBottom () scale down
axisTop () Scale Up

What constitutes the axis

In the predefined elements SVG canvas, there are six basic graphics:

rectangle
Round
oval
Segments
Broken line
Polygon

In addition, there is a rather special, it is the most powerful elements:

path

All graphics canvas, are made more than seven kinds of elements.

Obviously, there is no axis of this element.

Therefore, we need to be combined with other elements into a coordinate axis, so that it ultimately becomes a form similar to the following:

<g>
<!-- 第一个刻度 -->
<g>
<line></line>   <!-- 第一个刻度的直线 -->
<text></text>   <!-- 第一个刻度的文字 -->
</g>
<!-- 第二个刻度 -->
<g>
<line></line>   <!-- 第二个刻度的直线 -->
<text></text>   <!-- 第二个刻度的文字 -->
</g> 
...
<!-- 坐标轴的轴线 -->
<path></path>
</g>

Grouping element g, element is SVG, which means group. This element is a container assembly of the other elements, here elements for other axes packet storage.

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>The Seventh</title>
</head>
<script src="../../../JS/d3.min.js"></script>

<body>
    <script>
            var width = 300;	//画布的宽度
            var height = 300;	//画布的高度
    
            var svg = d3.select("body")				//选择文档中的body元素
                        .append("svg")				//添加一个svg元素
                        .attr("width", width)		//设定宽度
                        .attr("height", height);	//设定高度
    
            var dataset = [ 2.5, 0.9 , 2.1 , 1.3 , 1.7  ];
    
            var linear = d3.scaleLinear()
                    .domain([0, d3.max(dataset)])
                    .range([0, 250]);
    
            var rectHeight = 25;	//每个矩形所占的像素高度(包括空白)
    
            svg.selectAll("rect")
                .data(dataset)
                .enter()
                .append("rect")
                .attr("x",20)
                .attr("y",function(d,i){
                    return i * rectHeight;
                })
                .attr("width",function(d){
                    return linear(d);
                })
                .attr("height",rectHeight-2)
                .attr("fill","steelblue");
        /**
         * 比例尺这个方法在V3 V4 版本中方法被规范了，
         * V3 中是axis()调出比例尺方法，orient()划定比例尺的方向
         * 而在v4中直接就是axisBottom()指定比例尺向下
         * var axis = d3.svg.axis()
                        .scale(linear)		//指定比例尺
                        .orient("bottom")	//指定刻度的方向
                        .ticks(7);			//指定刻度的数量
         * */ 
            var axis = d3.axisBottom()
                        .scale(linear)		//指定比例尺
                        .ticks(7);			//指定刻度的数量
            svg.append("g")
                .attr("class","axis")
                .attr("transform","translate(20,130)")
                .call(axis);
    </script>  	
</body>
</html>

Here Insert Picture Description
Such a simple chart on the production of finished

-Ares

Published 79 original articles · won praise 89 · views 20000 +

Private letter concerns