本文摘自PHP中文网，作者不言，侵删。
本篇文章给大家带来的内容是关于d3.js实现创建完整柱形图的代码介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。d3js.org v5.9.2
之前只是各个部分的demo，现在将各部分整合起来，发现还是学到了不少东西
主要是加深了对scale（比例尺）的理解
代码
样式及数据
先是样式
1 2 3 4 5 6 7 8 | <style>
rect {
fill: pink
}
text {
font-size: 10px;
}
</style>
|
接着是数据及柱状图宽高等
1 2 3 4 5 6 7 8 9 10 | const
data = [3, 6, 10, 25],
barWidth = 100,
barHeight = 300,
padding = {
top: 100,
right: 100,
bottom: 100,
left: 100
};
|
创建比例尺
实践之后对比例尺与坐标轴的理解加深了一点
1 2 3 | let barScale = d3.scaleLinear().domain([0, d3.max(data)]).range([0, barHeight]),
yAxisScale = d3.scaleLinear().domain([d3.max(data), 0]).range([0, barHeight]),
xAxisScale = d3.scaleBand().domain([1, 2, 3, 4]).range([0, (barWidth - 1) * data.length]);
|
barScale用于柱形图创建
yAxisScale用于y轴创建，注意domain()的输入域，否则刻度数值大小排列会相反
xAxisScale用于x轴创建，使用scaleBand序数比例尺
之前对比例尺的理解太过肤浅，这里也做了几个小实验
1 2 3 | console.log(`barScale(0)：` + barScale(0));
console.log(`yAxisScale(0)：` + yAxisScale(0));
console.log(`xAxisScale(2)：` + xAxisScale(2));
|
显示如下
阅读剩余部分
相关阅读 >>
layui怎么固定表格的表头
javascript参数类型转换有哪些方法
利用jssdk在网页中获取地理位置
如何在javascript中绘制方块
jquery获取父窗口的元素
分享 10 个提高 javascript 技能的测验问答
javascript的3种注释写法为什么
javascript字符串大写怎么转为小写
javascript如何转化json字符串
详解javascript中的proxy(代理)
更多相关阅读请进入《d3.js》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » d3.js实现创建完整柱形图的代码介绍
