D3.js 几种常用的坐标轴

时间：2019-05-25 21:06:36 阅读：186 评论：0 收藏：0 [点我收藏+]

D3.js 学习随便，记录几种常用的坐标轴。

D3.js 比例尺，把一组输入域映射到输出域的函数，我们可以用比例尺来创建坐标轴。

.domain():设置输入域，.range()设置输出域；下面以基础的线性比例尺为例解释说明一下。

d3.scaleLinear 线性比例尺


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="test-svg">
        </div>
    </body>
    <script src="https://d3js.org/d3.v5.js"></script>
    <script>
        window.onload = function() {

            var width = 830,
                height = 800;
            
                        // 初始化svg
            var svg = d3.select("#test-svg")
                        .append('svg')
                        .attr('width', width + 'px')
                        .attr('height', height + 'px');
            
                        /*
                         * scaleLinear().domain([numbers]):输入域；[numbers]为数组，必须包含两个或以上的数字，且必须为数字
                         * scaleLinear().range([values]):输出域；[values]同样为数组
                         */
            var xScale1 = d3.scaleLinear()
                            .domain([-5, 5])
                            .range([20, width - 10]);

            var xAxis1 = d3.axisBottom().scale(xScale1);
            
                svg.append('g')
                   .call(xAxis1);
        }
    </script>
</html>

输入到输出的映射

技术分享图片

显示效果

技术分享图片

d3.scaleTime 线性时间比例尺


                       var xScale2 = d3.scaleTime()
                            .domain([new Date(2019, 1), new Date(2019, 6)])
                            .range([20, width - 40]);

                var xAxis2 = d3.axisBottom().scale(xScale2);

                svg.append('g')
                   .attr('transform', 'translate(0,100)')
                   .call(xAxis2);

技术分享图片

d3.scaleOrdinal 序列比例尺



                        var xdata = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];

            var xScale3 = d3.scaleOrdinal()
                            .domain(xdata)
                            .range([100, 200, 300, 400, 500, 600, 700]);

            var xAxis3 = d3.axisBottom().scale(xScale3);

                svg.append('g')
                   .attr('transform', 'translate(0,200)')
                   .call(xAxis3);

技术分享图片

自定义时间格式


                var _time = new Date().getTime();

            var timeTicks = [];

            for(var i = 0; i < 10; i++) {
                timeTicks.push(_time += 2000);
            }

            var format = function(time) {
                return d3.timeFormat("%H:%M:%S")(time * 1000);
            };

            // d3.extent 取最大最小值，此处起始和终止时间
            var xScale4 = d3.scaleLinear()
                            .domain(d3.extent(timeTicks))
                            .range([20, width - 40]);

            /*
             * .tickValues 指定刻度值
             * .tickFormat 设置刻度格式化器
             */
            var xAxis4 = d3.axisBottom().scale(xScale4).tickValues(timeTicks).tickFormat(format).tickSizeOuter(0);

                svg.append('g')
                   .attr('transform', 'translate(0,300)')
                   .call(xAxis4);

技术分享图片

坐标轴文字重叠

1）当坐标轴文字过多显示重叠时，可以倾斜坐标轴文字

技术分享图片


                var _time = new Date().getTime();

            var timeTicks = [];

            for(var i = 0; i < 20; i++) {
                timeTicks.push(_time += 2000);
            }

            var format = function(time) {
                return d3.timeFormat("%H:%M:%S")(time * 1000);
            };

            var xScale5 = d3.scaleLinear()
                            .domain(d3.extent(timeTicks))
                            .range([40, width - 40]);

            var xAxis5 = d3.axisBottom().scale(xScale5).tickValues(timeTicks).tickFormat(format).tickSizeOuter(0);

                svg.append('g')
                   .attr('transform', 'translate(0,400)')
                   .call(xAxis5)
                   .selectAll("text")
                   .attr("dy", ".75em")
                   .attr('transform', 'rotate(-14)');

技术分享图片

2）也可以上下交错排布


              var _time = new Date().getTime();

            var timeTicks = [];

            for(var i = 0; i < 20; i++) {
                timeTicks.push(_time += 2000);
            }

            var format = function(time) {
                return d3.timeFormat("%H:%M:%S")(time * 1000);
            };

            var xScale5 = d3.scaleLinear()
                            .domain(d3.extent(timeTicks))
                            .range([40, width - 40]);
            
            var trans = function(item,i){
                
                if(i % 2 === 0){
                    return '.75em';
                }else{
                    return '1.75em';
                }
                
            }
            
            var xAxis5 = d3.axisBottom().scale(xScale5).tickValues(timeTicks).tickFormat(format).tickSizeOuter(0);

                svg.append('g')
                   .attr('transform', 'translate(0,400)')
                   .call(xAxis5)
                   .selectAll("text")
                   .attr("dy", trans);

技术分享图片

D3.js 几种常用的坐标轴

原文：https://www.cnblogs.com/chenjy1225/p/10923844.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)