d3.js 创建完整柱形图

snowLu 发布于2019-08-23 16:44 / 1019人阅读

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

d3js.org v5.9.2
之前只是各个部分的demo，现在将各部分整合起来，发现还是学到了不少东西
主要是加深了对scale（比例尺）的理解

代码 html、样式及数据

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中常用的比例尺
完整的柱形图

云服务器 GPU云服务器柱形图 jquery flot柱形图 html5动态柱形图 js根据表格数据生成柱形图

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

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

d3.js交互图表

摘要：如果对原生还有比较熟悉的话，的交互很快就能掌握还是拿完整的柱形图例子修改完整的柱图通过对元素进行事件绑定或移除，用法很简单，例如注意这里使用才有指向对应元素用法和原生及几乎一样给柱状图进行事件绑定这里我们使得鼠标悬浮的柱状图颜色变为中，元素 d3js v5.9.2 如果对原生JS还有Jq比较熟悉的话，d3的交互很快就能掌握还是拿完整的柱形图例子修改：完整的柱图 showImg...

Miracle 2019-08-23 16:46 评论0 收藏0
常用的数据可视化工具

摘要：俗话说，不会使用工具来完成任务的都是进化不完全的表现，大数据时代，可视化已经深深钻进我们的生活，使用可视化工具也变的相当普遍，今天我们来总结下当下可视化工具都有哪些。是一个地图库，主要面向数据可视化用户。俗话说，不会使用工具来完成任务的都是进化不完全的表现，大数据时代，可视化已经深深钻进我们的生活，使用可视化工具也变的相当普遍，今天我们来总结下当下可视化工具都有哪些。 showImg...

philadelphia 2019-08-22 11:06 评论0 收藏0
d3.js入门——selection与创建条形图

摘要：入门，根据官网部分教程学习，发现因为版本更新，有些和概念可能不适用，但总体思想未变。入门d3.js，根据官网部分教程学习，发现因为版本更新，有些api和概念可能不适用，但总体思想未变。本文思路跟随此篇blogLet’s Make a Bar Chart学习，加上自己的理解，并且查阅了部分更新资料元素选择 d3通过d3.select()或者d3.selectAll()获取元素，这两个...

yanbingyun1990 2019-08-23 16:18 评论0 收藏0
Excelize发布2.0.1版本，Go语言Excel文档基础库

摘要：是语言编写的用于操作文档类库，基于标准。可以使用它来读取写入由及以上版本创建的文档。年月日，社区正式发布了版本，该版本包含了多项新增功能错误修复和兼容性提升优化。下面是有关该版本更新内容的摘要，完整的更改列表可查看。 showImg(https://segmentfault.com/img/remote/1460000018971694?w=880&h=360); Excelize 是...

oliverhuang 2019-08-27 10:57 评论0 收藏0
d3入门篇（二）：绘制基本的柱形图

摘要：简单理解后的元素需要继续进行可视化的工作。当选择集中的元素个数大于数据集中的元素个数，通过处理之后返回多出来那部分数据的元素选择器这时候接着执行那就是在上了。简单理解后返回的是一个选择集，即多出来的那部分元素。 d3简单理解就是通过在svg画布上绘制基本图形，本文将介绍d3绘制基本的柱形图绘制画布 import * as d3 from d3; var width=300;//svg...

张率功 2019-08-23 14:00 评论0 收藏0