D3.js入门篇-柱状图

最新推荐文章于 2025-06-12 16:12:39 发布

vegetable_dog

最新推荐文章于 2025-06-12 16:12:39 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： D3 文章标签： d3

本文链接：https://blog.youkuaiyun.com/qq_29650971/article/details/82292268

本文记录了使用D3.js制作柱状图的学习过程。从创建JSON数据到利用D3.js的API绘制图表，详细介绍了绘制柱状图的步骤。因D3 v5的d3.json()方法在某些浏览器中存在问题，采用jQuery的$.getJSON()来获取数据。最后，作者指出主要挑战在于熟悉HTML标签属性和D3的API。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引言

最近项目中有个新feature需要画一个业务流程的拓扑图，需要用到d3绘制，在这里记录一下学习过程，由于对前端不太熟悉，svg也是刚接触，所以进度感人（手动滑稽），好，进入正题，本篇使用d3完成一个简单的柱状图。

D3 柱状图

首先造一点json格式的数据：
data.json

{
"data":[
    {"value":123},
    {"value":432},
    {"value":432},
    {"value":432},
    {"value":333},
    {"value":134},
    {"value":222}   
]}

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="js/d3.js"></script>
        <script src="js/jquery-3.3.1.min.js"></script>
    </head>
    <body>
        <script src="js/test.js"></script>
    </body>
</html>

引入jQuery的原因是d3 v5版本的d3.json()底层实现由v4的ajax请求替换成了fetch，导致一些未实现的浏览器报错，因此这一使用$.getJSON()取代d3.json()来获取json文件。
test.js

//通过jQuery获取json数据
$.getJSON('data/data.json',function(d

最低0.47元/天解锁文章

200万优质内容无限畅学