摘要:之前只是各个部分的,现在将各部分整合起来,发现还是学到了不少东西主要是加深了对比例尺的理解代码样式及数据样式接着是数据及柱状图宽高等留白用创建比例尺实践之后对比例尺与坐标轴的理解加深了一点轴使用线性比例尺,注意输入域轴使用比例尺用于柱形
d3js.org v5.9.2
之前只是各个部分的demo,现在将各部分整合起来,发现还是学到了不少东西
主要是加深了对scale(比例尺)的理解
html
样式
接着是数据及柱状图宽高等
const data = [3, 6, 10, 25], barWidth = 100, barHeight = 300, padding = { //svg留白用 top: 100, right: 100, bottom: 100, left: 100 };创建比例尺
实践之后对比例尺与坐标轴的理解加深了一点
let barScale = d3.scaleLinear().domain([0, d3.max(data)]).range([0, barHeight]), yAxisScale = d3.scaleLinear().domain([d3.max(data), 0]).range([0, barHeight]),//y轴使用线性比例尺,注意domain输入域 xAxisScale = d3.scaleBand().domain([1, 2, 3, 4]).range([0, (barWidth - 1) * data.length]); //x轴使用scaleBand比例尺
barScale用于柱形图创建
yAxisScale用于y轴创建,注意domain()的输入域,否则刻度数值大小排列会相反
xAxisScale用于x轴创建,使用scaleBand序数比例尺
之前对比例尺的理解太过肤浅,这里也做了几个小实验
console.log(`barScale(0):` + barScale(0)); console.log(`yAxisScale(0):` + yAxisScale(0)); console.log(`xAxisScale(2):` + xAxisScale(2));
显示如下
对于barScale与yAxisScale,输入域相反,所以映射相反,把一篇他人很棒的总结放于文末
创建柱状图let barContainer = d3.select(".chart") .attr("width", data.length * barWidth + padding.left + padding.right) .attr("height", barHeight + padding.top + padding.bottom) .selectAll("g") .data(data).enter().append("g") .attr("transform", (d, i) => { return "translate(" + (padding.left + i * barWidth) + "," + (padding.top + barHeight - barScale(d)) + ")" }); barContainer.append("rect") .attr("height", d => barScale(d)) .attr("width", barWidth - 1); barContainer .append("text") .text(d => d) .attr("y", 10) .attr("x", barWidth / 2 - 5);
这里使用了之前定义的padding对象的值进行部分留白
创建坐标轴/** * 创造y轴 */ let yAxis = d3.axisLeft(yAxisScale); d3.select(".chart") .append("g") .attr("transform", "translate(" + (padding.left - 10) + "," + padding.top + ") ") .call(yAxis); /** * 创建X轴 */ let xAxis = d3.axisBottom(xAxisScale); d3.select(".chart") .append("g") .attr("transform", "translate(" + (padding.left) + "," + (padding.top + barHeight) + ")") .call(xAxis);
最后创建坐标轴
总结对之前学的东西做了一次结合,还有很多地方待提升
不足请大佬指出
D3中常用的比例尺
完整的柱形图
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/103221.html
摘要:俗话说,不会使用工具来完成任务的都是进化不完全的表现,大数据时代,可视化已经深深钻进我们的生活,使用可视化工具也变的相当普遍,今天我们来总结下当下可视化工具都有哪些。是一个地图库,主要面向数据可视化用户。 俗话说,不会使用工具来完成任务的都是进化不完全的表现,大数据时代,可视化已经深深钻进我们的生活,使用可视化工具也变的相当普遍,今天我们来总结下当下可视化工具都有哪些。 showImg...
摘要:入门,根据官网部分教程学习,发现因为版本更新,有些和概念可能不适用,但总体思想未变。 入门d3.js,根据官网部分教程学习,发现因为版本更新,有些api和概念可能不适用,但总体思想未变。本文思路跟随此篇blogLet’s Make a Bar Chart学习,加上自己的理解,并且查阅了部分更新资料 元素选择 d3通过d3.select()或者d3.selectAll()获取元素,这两个...
摘要:是语言编写的用于操作文档类库,基于标准。可以使用它来读取写入由及以上版本创建的文档。年月日,社区正式发布了版本,该版本包含了多项新增功能错误修复和兼容性提升优化。下面是有关该版本更新内容的摘要,完整的更改列表可查看。 showImg(https://segmentfault.com/img/remote/1460000018971694?w=880&h=360); Excelize 是...
摘要:简单理解后的元素需要继续进行可视化的工作。当选择集中的元素个数大于数据集中的元素个数,通过处理之后返回多出来那部分数据的元素选择器这时候接着执行那就是在上了。简单理解后返回的是一个选择集,即多出来的那部分元素。 d3简单理解就是通过在svg画布上绘制基本图形,本文将介绍d3绘制基本的柱形图 绘制画布 import * as d3 from d3; var width=300;//svg...
阅读 2738·2023-04-25 18:46
阅读 644·2021-11-19 09:40
阅读 2021·2021-09-28 09:36
阅读 3272·2021-09-10 11:11
阅读 3415·2019-08-30 15:55
阅读 1753·2019-08-30 15:54
阅读 2551·2019-08-29 16:16
阅读 3478·2019-08-29 15:08