D3.js学习总结（四）——坐标轴

最新推荐文章于 2024-06-07 09:43:30 发布

黄金安魂曲

最新推荐文章于 2024-06-07 09:43:30 发布

阅读量3.5k

点赞数 2

分类专栏：前端文章标签： D3.js

本文链接：https://blog.csdn.net/keanu1978/article/details/79126511

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

坐标轴（Axis）就是比例尺在界面上的直观显示，所以坐标轴必须要和一个比例尺进行绑定。d3.js提供了现成的语法代码，可以很方便的画出坐标抽。如下：

<body>
    <script>
        var width = 600;
        var height = 600;
        var svg = d3.select("body").append("svg")
                .attr("width", width)
                .attr("height", height);

        // 用于坐标轴的线性比例尺
        var xScale = d3.scaleLinear()
                .domain([0, 10]) // 定义显示在比例尺上面的刻度
                .range([0, 300]); // 定义比例尺实际的显示宽度（像素）

        // 定义坐标轴
        var axis = d3.axisBottom(xScale);

        // 在svg中添加一个包含坐标轴各元素的g元素
        var gAxis = svg.append("g")
                .attr("transform", "translate(80, 80)"); // 坐标原点平移到（80, 80）的位置

        // 绘制坐标轴
        gAxis.call(axis);
    </script>
</body>

定义一个坐标轴：

d3.axisTop(scale)——创建一个top-axis，轴在水平方向绘制；
d3.axisBottom(scale)——创建一个bottom-axis，轴在水平方向绘制；
d3.axisRight(scale)——创建一个right-axis，轴在垂直方向绘制；
d3.axisLeft(scale)——创建一个left-axis，轴在垂直方向绘制；

坐标轴是由SVG的<path>、<line>和<text>组成的。坐标轴的主线就是<path>，刻度短线是<line>，刻度文本是<text>。这些标签要加入到SVG的<g>标签中。轴元素<path>的样式名为“domain”，刻度的样式表为“tick”

这里写图片描述

我们可以自定义坐标轴的样式，比如追加如下的样式代码：

<style>
    .axis path, .axis line{
        stroke: blue;;
    }
    .axis text{
        font-family: sans-serif;
        font-size: 12px;
        fill: #F00;
    }
</style>

然后给<g>元素追加一个class属性，指定为axis。如下：

var gAxis = svg.append("g")
        .attr("transform", "translate(80, 80)") // 坐标原点平移到（80, 80）的位置
        .attr("class", "axis");

这样就显示了一个蓝色的坐标轴，并且刻度文字是红色12px大小。

xScale是一个比例尺，其定义域为[0, 10]，表示坐标轴的刻度范围。值域为[0, 300]表示绘制在界面上坐标轴长度（像素）的范围。代码的最后一行就是渲染这个坐标轴，使用了call()命令。
渲染坐标轴有两个方法可以调用，如下：

context.call(axis)
axis(context)

// 绘制坐标轴
//gAxis.call(axis);
axis(gAxis);

在坐标轴上标注刻度是由d3自动标注的的，比如上面的代码在坐标轴上显示了0、1、2…10共11个刻度文字。如果只想显示5个刻度，可以写如下代码：

var axis = d3.axisBottom(xScale)
        .ticks(5);

或者只想在特定的值上显示刻度，可以写如下的代码：

var axis = d3.axisBottom(xScale)
        .tickValues([6, 7, 8, 9, 10]);

显示在坐标轴上的刻度线的长短默认为6，可以通过tickSize(value)、tickSizeInner(value)和tickSizeOuter(value)来设置。outer表示轴两头端点的刻度线长度，inner表示除了两头内部刻度线的长度；可以通过tickPadding(value)来设置刻度线和刻度文字之间的间隔，这个值默认为3；最后可以通过tickFormat()来格式化显示刻度文字，比如增加百分号，或者保留2位小数等。如下：

var axis = d3.axisBottom(xScale)
        .tickValues([6, 7, 8, 9, 10])
        .tickSize(5)
        .tickPadding(5)
        .tickFormat(d3.format("$0.1f"));

黄金安魂曲

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
D3.js学习总结（四）——坐标轴

坐标轴（Axis）就是比例尺在界面上的直观显示，所以坐标轴必须要和一个比例尺进行绑定。d3.js提供了现成的语法代码，可以很方便的画出坐标抽。如下：body> script> var width = 600; var height = 600; var svg = d3.select("body").append("svg")
复制链接

扫一扫

专栏目录