d3.js 使用坐标轴

Karuru 发布于2019-08-23 16:43 / 1906人阅读

摘要：本片记录坐标轴入门，使用版本如何实现坐标轴生成的坐标图是通过的路径元素元素组成的，如下图表示的是底部坐标轴不包括内部刻度，如下这部分通过描绘，在中称为容器则包括了和作为即线，即文字实现坐标轴主要步骤步骤主要如下创建比例尺创建坐标轴，是个函数

本片blog记录d3坐标轴入门，使用版本v5.9.2

SVG如何实现坐标轴

d3生成的坐标图是通过svg的path(路径)元素 + g + line + text元素组成的，如下图

path表示的是底部坐标轴（不包括内部刻度），如下

这部分通过d描绘，在d3中称为outer tick

g容器则包括了text和line作为inner tick

line即线，text即文字

d3实现坐标轴主要步骤

步骤主要如下：

创建scale（比例尺）

创建axis（坐标轴，是个函数）

selection.call(axis)创建坐标轴

小实验 数据与宽高

const data = [1, 10, 20];
let svgWidth = 400,
    svgHeight = 400;

小实验都用这些数据啦

最简单的坐标轴

/**
 * 创建scale
 */
let scale = d3.scaleLinear()
    .domain([0, d3.max(data)]) //输入域
    .range([0, 200]); //输出域，这里可理解为坐标轴长度范围
/**
 * 创建axis
 */
let axis = d3.axisTop(scale); //创建坐标轴，除此之外还有axisLeft，axisBottom，axisRight，区别在于tick（刻度）的朝向
/**
 * 插入
 */
d3.select("body")
    .append("svg")
    .attr("width", svgWidth)
    .attr("height", svgHeight)
    .append("g")//需要放在g容器里
    .attr("transform", "translate(10,20)")
    .call(axis);//创建坐标轴

坐标轴的长度来源于比例尺的range
最大值来源于d3.max(data)
200(range) / 20(最大值) = 10段
20(最大值） / 10段 = 2
所以坐标轴如是显示

仅显示所需的刻度的坐标轴

上一个坐标轴显示了平均的刻度，但是有时这不是我们想要的，我们可以使用axis.tickValues()显示需要的刻度
仅需在axis后增加api即可

let axis = d3.axisTop(scale).tickValues(data);

设置刻度长短

也是使用axis.tickSize()即可，为方便观察，这里使用axisBottom坐标轴

let axis = d3.axisBottom(scale).tickValues(data).tickSize(200);

设置样式

其实设置样式就是对其中的svg设置，原理类似dom操作，选择svg元素，改变样式

举个简单的例子

d3.select("body")
    .append("svg")
    .attr("width", svgWidth)
    .attr("height", svgHeight)
    .append("g")
    .attr("transform", "translate(10, 20)")
    .call(axis)
    .selectAll("path").attr("stroke", "pink").attr("stroke-width", "5");

最后对g中的path进行赋样式

总结

组合好不同的API会有更多效果！

参考资料

d3.js直方图与坐标轴基础
d3.js API
selection.call()
d3中的axis.ticks详解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103191.html

交互式数据可视化－D3.js（三）比例尺

摘要：设置为，则所有超出值域范围的值，都会被收缩到值域之内。指数比例尺相对线性比例尺多出一个用于指定指数。这段代码中相当于定义一个线性比例尺。使用量子比例尺后定义域将被分成这段，分别对应值域的个值。线性比例尺线性比例尺是常用比例尺常用方法有： var linear = d3.scaleLinear() - 创建一个定量的线性比例尺. linear.domain([numbers]) - ...

huhud 2019-08-02 11:54 评论0 收藏0
交互式数据可视化－D3.js（三）比例尺

摘要：设置为，则所有超出值域范围的值，都会被收缩到值域之内。指数比例尺相对线性比例尺多出一个用于指定指数。这段代码中相当于定义一个线性比例尺。使用量子比例尺后定义域将被分成这段，分别对应值域的个值。线性比例尺线性比例尺是常用比例尺常用方法有： var linear = d3.scaleLinear() - 创建一个定量的线性比例尺. linear.domain([numbers]) - ...

graf 2019-08-23 12:42 评论0 收藏0
d3.js ---画坐标轴

摘要：画坐标轴使用的的方法生成坐标轴页面效果如下这个时候轴在页面的上方，不在我们想要的位置，可以通过设置属性将坐标轴移到自己想要的位置画轴效果如下，这个时候轴在页面的上方，不在我们想要的位置，所以要让轴旋转轴旋转代码加上旋转后的效果图如下会发现轴画坐标轴 //使用d3的svg的axis()方法生成坐标轴 var x_axis = d3.svg.axis().scale(scale_x), ...

zzzmh 2019-08-02 15:59 评论0 收藏0
d3.js ---画坐标轴

摘要：画坐标轴使用的的方法生成坐标轴页面效果如下这个时候轴在页面的上方，不在我们想要的位置，可以通过设置属性将坐标轴移到自己想要的位置画轴效果如下，这个时候轴在页面的上方，不在我们想要的位置，所以要让轴旋转轴旋转代码加上旋转后的效果图如下会发现轴画坐标轴 //使用d3的svg的axis()方法生成坐标轴 var x_axis = d3.svg.axis().scale(scale_x), ...

ygyooo 2019-08-21 17:56 评论0 收藏0
d3.js 创建完整柱形图

摘要：之前只是各个部分的，现在将各部分整合起来，发现还是学到了不少东西主要是加深了对比例尺的理解代码样式及数据样式接着是数据及柱状图宽高等留白用创建比例尺实践之后对比例尺与坐标轴的理解加深了一点轴使用线性比例尺，注意输入域轴使用比例尺用于柱形 d3js.org v5.9.2 之前只是各个部分的demo，现在将各部分整合起来，发现还是学到了不少东西主要是加深了对scale（比例尺）的理解...

snowLu 2019-08-23 16:44 评论0 收藏0