利用d3.js绘制柱状图demo

最新推荐文章于 2024-05-07 21:34:26 发布
最新推荐文章于 2024-05-07 21:34:26 发布
阅读量3.7k 收藏 5
点赞数 3
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/javaexploreroooo/article/details/51830722
版权

这个不太难，就随手写了个demo.

<!DOCTYPE html>
<html>
<head>
	<title>完整柱状图demo</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="js/d3.js"></script>
	<script type="text/javascript" src="js/d3.min.js"></script>
</head>
<body>
<script type="text/javascript">
	//1.画布svg
	var width=400;
	var height=400;//画布大小

	var svg=d3.select("body").append("svg").attr("width",width).attr("height",height);//添加画布
	//画布周边留白
	var padding={left:30,right:30,top:20,bottom:20};

	//定义数据
	var dataset=[10,20,30,50,45,60,18];
	//x轴比列尺
	var xScale=d3.scale.ordinal().domain(d3.range(dataset.length)).rangeRoundBands([0,width-padding.left-padding.right]);
	//y轴比例尺
	var yScale=d3.scale.linear().domain([0,d3.max(dataset)]).range([height-padding.top-padding.bot
最低0.47元/天 解锁文章
波比小金刚
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
D3_demo:D3.js绘制的图表
05-27
启动 how to use npm install npm start 访问 http://localhost:8888/ 文档 Doc 简单的D3图表示例(整理不易，点个star，这次一定) 直方图 (barChart) 散点图 (scatterChart) 折线图 (lineChart) 饼图 (pieChart) 雷达图 (radarChart) 矩形树状图 (treeMapChart) 树图 (treeChart) 封闭图 (enclosureChart) 漏斗图 (funnelChart) 地图 (map) 力图 (force) 河流图 (riverChart) 桑基图 (sanKeyChart) 仪表图 (gauge) 旭日图 (sunburst) 盒须图 (boxplot) 热力图 (heatMap) 关系图 (graph)
图形化开发（四）04-D3.js之实践——柱状图详细版demo
weixin_44867717的博客
09-22 265
图形化开发（四）04-D3.js之实践——柱状图详细版demo 效果 代码 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Com
D3.js实战：数据可视化高级技巧实例应用
最新发布
天涯学馆
05-07 657
D3.js可以与地理数据格式如GeoJSON配合，创建互动式地图。这包括国家、州、城市边界等。首先，我们需要一个HTML文件来引入D3.js库，并准备一个画布来放置我们的图表。力导向图展示节点和边的关系，非常适合网络、社交图谱等数据的可视化。交互性示例：添加悬停效果到柱状图。动画示例：平滑过渡线图数据更新。
用D3.js绘制完整的流程图demo
热门推荐
qq_42177730的博客
03-11 1万+
一个完整的流程图demo，效果入下： HTML <!doctype html> <meta charset="utf-8"> <title>Dagre D3 Demo: Sentence Tokenization</title> <link rel="stylesheet" href="demo.css"> <scr...
如何使用D3.js简单的制作可交互柱状图（完整代码）
mclryan的博客
02-22 5259
前言 了解D3是什么，D3的基本用法 完成一个简易的可交互的柱状图 最近假期写了点东西，趁略有闲余之时，玩了一下D3，之前项目中主要是用各类charts，比如Echarts，诸如此类还有highCharts等，不过那种是用别人写好的库，添加好数据就完成了，就是配置的问题，这种类库最大的问题是定制很难，而D3是自己制作图形，可定制方面比较强，自由度很大，做完之后还是感觉很爽的 现在是数据时代，...
D3.js实现节点折叠+闪烁+叶节点形状改变的demo
Joker_Fei的博客
07-10 8225
这个demo主要实现的功能是D3树图节点折叠功能+闪烁+叶节点形状改变功能：效果图（带颜色节点有闪烁功能）： HTML代码：<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Tree Example</title> <style> .node { cursor:
d3js流程图代码
04-09
**D3.js 流程图代码详解** D3.js（Data-Driven Documents）是一个强大的JavaScript库，用于在浏览器中操作...同时，D3.js不仅限于流程图，它在数据可视化的各种应用场景中都有广泛的应用，如折线图、柱状图、地图等。
d3_折线_柱状_地图.zip
07-29
本篇文章将深入探讨“d3_折线_柱状_地图.zip”这个压缩包中所包含的D3.js示例，通过分析和运行这些示例，我们将全面了解如何使用D3.js来绘制折线图、柱状图以及地图。 首先，让我们关注折线图。在数据可视化中，...
流程图_dagre-d3流程图_dagre-d3_DEMO_
10-03
D3.js提供了丰富的API，支持各种图表的创建，如折线图、柱状图、散点图等，同时也支持自定义复杂的可视化。 而dagre-d3是D3.js的一个扩展，它为D3提供了一个布局引擎，专门用于处理有向图。dagre-d3的核心功能包括...
js柱状图统计demo
07-12
"js柱状图统计demo"是一个实例，它展示了如何利用JavaScript来创建柱状图，一种常见的数据可视化工具。在这个项目中，开发者提供了一个可以直接运行的HTML页面，通过引入特定的JS库，可以快速实现柱状图的绘制。 ...
d3.js-demo:一些小的d3.js的demo，欢迎大家下载
05-12
d3.js-demo:一些小的d3.js的demo，欢迎大家下载
v4版本的D3js源码和Api已经齐全的demo
01-18
v4版本的D3js源码和Api已经齐全的demo，详细的api介绍和实例。以代码齐全；
3D柱状图js代码
10-30
js完成柱状图描绘，柱状图立体完成，色彩分明极易辨识，底色渐变更有特点
echarts实现3D柱状图（视觉层面）和3D饼图
布克吉的博客
06-06 1万+
立体图形从一个方向只能看到三个面，于是我们通过echarts图表实现 顶部，明面，和暗面。更多参数配置，前往echarts官网查询，
d3.js树图示例demo
孔艺菲的博客
08-28 1763
转载：d3.js树图示例 (juejin.cn) 前言 本文总结了d3.js中绘制树图的基本过程 完整代码： GitHub地址CodePen地址 原理阐述 其实用d3.js构建树图非常简单，主要用到的是如下几个API const hierarchyData = d3.hierarchy(data) - 将层级数据进一步精细化 const treeLayout = d3.tree() - 获取layout const nodesData = treeLayout( hier.
大量 D3.js 示例
小飞侠的博客
09-07 1万+
113th U.S. Congressional Districts20 years of the english premier football league20000 points in random motion2012 NFL Conference Champs2012-2013 NBA Salary Breakdown25 great circles2D Matrix Decompos
d3.js 共享交换平台demo
weixin_30954265的博客
09-25 152
今天在群里遇到一张图 遂来玩一玩，先来上图!! 点击相应按钮，开关线路，此项目的重点是计算相应图形的位置，由于是个性化项目就没有封装布局。好了直接上代码。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&g...
d3.js的demo
李弈圣的博客
07-17 1401
<!DOCTYPE html> <html style="overflow: hidden;"> <head> <meta charset="UTF-8"> <title>流程设计工具</title> <link href="https://cdn.bootcss.com/bootstrap/4....
d3.js绘制对比柱状图
05-12
对比柱状图可以使用d3.js中的矩形图（rect）元素来绘制。以下是一个简单的例子： HTML代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3.js对比柱状图</title> <script src="https://d3js.org/d3.v5.min.js"></script> </head> <body> <svg id="chart" width="400" height="300"></svg> <script src="script.js"></script> </body> </html> ``` JavaScript代码： ```javascript // 数据 var data = [ {name: 'A', value: 20}, {name: 'B', value: 35}, {name: 'C', value: 10}, {name: 'D', value: 15}, {name: 'E', value: 25} ]; // 定义svg画布大小 var width = 400; var height = 300; // 定义比例尺 var xScale = d3.scaleBand() .domain(data.map(function(d) { return d.name; })) .range([0, width]) .padding(0.1); var yScale = d3.scaleLinear() .domain([0, d3.max(data, function(d) { return d.value; })]) .range([height, 0]); // 创建svg元素 var svg = d3.select('#chart') .append('g') .attr('transform', 'translate(' + 50 + ',' + 10 + ')'); // 绘制矩形 svg.selectAll('rect') .data(data) .enter() .append('rect') .attr('x', function(d) { return xScale(d.name); }) .attr('y', function(d) { return yScale(d.value); }) .attr('width', xScale.bandwidth()) .attr('height', function(d) { return height - yScale(d.value); }) .style('fill', 'steelblue'); ``` 解释： 1. 定义数据，包含每个柱子的名称和值。 2. 定义画布大小。 3. 定义x轴和y轴的比例尺，x轴比例尺使用`scaleBand`，y轴比例尺使用`scaleLinear`。 4. 创建svg元素，并将其偏移50像素到右侧和10像素到下方。 5. 绘制矩形，使用`selectAll`和`data`方法绑定数据，使用`enter`方法进入数据，使用`append`方法添加矩形元素，使用`attr`方法设置x、y、width和height属性，使用`style`方法设置颜色。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值