d3.js学习6----完整的条形图表

最新推荐文章于 2022-08-21 23:21:03 发布
最新推荐文章于 2022-08-21 23:21:03 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： 数据可视化 文章标签： d3.js


         一个完整的柱形图包含三部分：矩形、文字、坐标轴。本章将对前几章的内容进行综合的运用，制作一个实用的柱形图，内容包括：选择集、数据绑定、比例尺、坐标轴等内容。

 

1. 添加 SVG 画布

 

//画布大小

var width = 400;

var height = 400;

 

//在 body 里添加一个 SVG 画布  

var svg = d3.select("body")

   .append("svg")

   .attr("width", width)

   .attr("height", height);

 

//画布周边的空白

 varpadding = {left:30, right:30, top:20, bottom:20};

上面定义了一个 padding，是为了给 SVG 的周边留一个空白，最好不要将图形绘制到边界上。

 

2. 定义数据和比例尺

 

//定义一个数组

var dataset = [10, 20, 30, 40, 33, 24, 12,5];

       

//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.bottom, 0]);

x 轴使用序数比例尺，y 轴使用线性比例尺。要注意两个比例尺值域的范围。

 

3. 定义坐标轴

 

//定义x轴

var xAxis = d3.svg.axis()

   .scale(xScale)//x轴的比例尺

   .orient("bottom");

       

//定义y轴

var yAxis = d3.svg.axis()

   .scale(yScale)//y轴的比例尺

   .orient("left");

x 轴刻度的方向向下，y 轴的向左。

 

4. 添加矩形和文字元素

 

//矩形之间的空白

var rectPadding = 4;

 

//添加矩形元素

var rects =svg.selectAll(".MyRect")

       .data(dataset)

       .enter()

       .append("rect")

       .attr("class","MyRect")

       .attr("transform","translate(" + padding.left +"," + padding.top + ")")

       .attr("x", function(d,i){

           return xScale(i) + rectPadding/2;

       } )  //这次的是横的走的条形图

       .attr("y",function(d){

           return yScale(d);//

       })

       .attr("width", xScale.rangeBand() - rectPadding )

       .attr("height", function(d){

           return height - padding.top - padding.bottom - yScale(d);

       });

 

//添加文字元素

var texts =svg.selectAll(".MyText")

       .data(dataset)

       .enter()

       .append("text")

       .attr("class","MyText")

       .attr("transform","translate(" + padding.left +"," + padding.top + ")")

       .attr("x", function(d,i){

           return xScale(i) + rectPadding/2;

       } )

       .attr("y",function(d){

           return yScale(d);

       })

       .attr("dx",function(){

           return (xScale.rangeBand() - rectPadding)/2;

       })

       .attr("dy",function(d){

           return 20;

       })

       .text(function(d){

           return d;

       });

矩形元素和文字元素的 x 和 y 坐标要特别注意，要结合比例尺给予适当的值。

 

5. 添加坐标轴的元素

 

//添加x轴

svg.append("g")

 .attr("class","axis")

 .attr("transform","translate(" + padding.left +"," + (height - padding.bottom) + ")")

 .call(xAxis);

       

//添加y轴

svg.append("g")

 .attr("class","axis")

 .attr("transform","translate(" + padding.left +"," + padding.top + ")")

 .call(yAxis);

坐标轴的位置要结合空白 padding 的值来设定。

 

 

代码：

<html> 

<head> 

         <metacharset="utf-8"> 

         <title>坐标轴</title> 

</head>

 

<style>

.axis path,

.axis line{

         fill:none;

         stroke:black;

         shape-rendering:crispEdges;

}

 

.axis text {

         font-family:sans-serif;

         font-size:11px;

}

</style>

 

<body> 

<scriptsrc="http://d3js.org/d3.v3.min.js"charset="utf-8"></script> 

<script>

 

       var width = 300;       //画布的宽度

                   varheight = 300;      //画布的高度

 

                   varsvg = d3.select("body")                                 //选择文档中的body元素

                                               .append("svg")                                     //添加一个svg元素

                                               .attr("width",width)                 //设定宽度

                                               .attr("height",height);    //设定高度

 

                   vardataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];

 

                   varlinear = d3.scale.linear()

                                     .domain([0,d3.max(dataset)])

                                     .range([0,250]);

 

                   varrectHeight = 25;         //每个矩形所占的像素高度(包括空白)

 

                   svg.selectAll("rect")//这个就是把矩形画上去，哈哈

                            .data(dataset)

                            .enter()

                            .append("rect")

                            .attr("x",20)

                            .attr("y",function(d,i){

                                     returni * rectHeight;

                            })

                            .attr("width",function(d){

                                     returnlinear(d);

                            })

                            .attr("height",rectHeight-2)

                            .attr("fill","steelblue");

 

                   varaxis = d3.svg.axis()

                                               .scale(linear)             //指定比例尺

                                              .orient("bottom")    //指定刻度的方向

                                               .ticks(7);                     //指定刻度的数量

 

                   svg.append("g")

                            .attr("class","axis")//就是把它画上去

                            .attr("transform","translate(20,130)")

                            .call(axis);

 

</script>       

</body> 

</html>  

Pitter_Patter_Bee
关注
专栏目录
条形图：用d3.js制成的条形图：）
02-17
关于 遵循以下列出的要求，使用d3.js制作的条形图： X轴是-z。 Y轴为-10到90（条形图可以位于x轴下方）。 X轴没有任何刻度。 在该示例中，没有下拉菜单，而是有一个接受数字的输入框。 范围是（0到10）。 默认情况下，它是5。该数字可用作种子，以创建-z条形的-10到90之间的随机数。 使用股票js随机函数。 当输入更改时，条形图应进行动画处理（例如，从40变为70，我们应该看到条形图的高度增加）以达到新的高度。 在d3中还不错。 运行npm install 运行npm start 您应该能够看到条形图！ Demo.gif：现场演示！ 感谢： : 我观看了此视频，以学习d3条形图的基本知识
D3.js 做一个简单的图表（条形图）
04-28 290
柱形图是一种最简单的可视化图标，主要有矩形、文字标签、坐标轴组成。 本文为简单起见，只绘制矩形的部分，用以讲解如何使用 D3 在 SVG 画布中绘图。 一、 画布是什么 　　前几章的处理对象都是 HTML 的文字，没有涉及图形的制作。 　　要绘图，首要需要的是一块绘图的“画布”。 　　HTML 5 提供两种强有力的“画布”：SVG和Canvas。　 ...
使用d3.js画簇状条形图
qq_41756580的博客
03-28 904
效果图： 直接上代码： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view...
D3js 可视化 优雅制作简单条形图 pop2010
陈杉菜
04-03 504
人外有人山外有山 条形图外有条形图 之前讲了完完全全没有涉及到js的条形图 讲了没有用到除了0以外数字的条形图 可 还是 没有 优雅发挥D3的所有功能 于是，接着修改原来的条形图 GO GO GO 对比图（左边是原来的，右边是优雅系列嘻嘻嘻） 表面上看差不太多 实际上 内心已经收到升华变得优雅了ohhahah JUST　DO　IT ———————— ！注意 ｃａｌｌ ｒａｎｇｅＢａｎｄ　和　ｒ...
初识d3.js(2) ——简单的条形图
qq_38318589的博客
10-08 295
初识d3.js(2) ——简单的条形图、d3.js做条形图
Historical-ranking-data-visualization-based-on-d3.js-master (1).zip
02-23
6. **交互性**：d3.js不仅支持静态图表，还能实现丰富的交互功能。比如，用户可以通过鼠标悬停获取详细信息，点击切换年份，甚至拖动轴来缩放时间范围。这些交互元素增强了数据的可探索性，使用户能更深入地分析数据...
D3.js-Chart-with-Jasmine-Test-Cases:D3.js带有茉莉花测试用例的图表
05-13
D3.js是一个强大的JavaScript库，专门用于数据驱动的文档操作...学习这个项目，开发者可以加深对D3.js图表创建的理解，同时掌握使用Jasmine进行前端测试的技巧，这对于提升JavaScript项目的可靠性和可维护性至关重要。
D3.js-Data-Visualization-Projects:Packt发布的D3.js数据可视化项目的代码存储库
05-28
使用D3.js创建图表，包括线条，条形图，散点图，区域，组合条形图，堆积条形图，饼图和甜甜圈 使用轴，标签，标题，图例等增强图表 使用动画突出显示数据更改 允许用户使用鼠标或触摸与数据进行交互 说明和导航 假设...
D3.js-in-action
05-31
D3.js（Data-Driven Documents）是由 Mike Bostock 创建的一个JavaScript库，主要用于在Web浏览器中生成动态、交互式的可视化图形。这本书将理论与实践相结合，引领读者探索数据可视化的世界。 ### D3.js基础知识 1...
D3.js中文版api-接口文档
01-26
D3.js是一款非常强大的JavaScript库，主要用于在网页上绘制动态的数据可视化图表。本篇将详细介绍D3.js的核心功能及API，帮助读者更好地理解和运用D3.js进行数据可视化开发。 #### D3.js核心功能 D3.js的核心功能...
js + html条形图
06-24
js+html 的条形图，调用方法明确参数注明详细
bar-charts-with-d3:使用D3的简单条形图实现
05-08
带有D3 JS的条形图 使用D3 js的简单条形图实现。
bar-plot-d3：使用d3绘制条形图的工具
02-25
使用D3绘制条形图的基本工具 基本用法： npm install -S bar-plot-d3 导入代码 import 'd3Bar from 'bar-plot-d3' 将canvas元素添加到html页面（d3Canvas是预期的默认ID） <div id='#d3Canvas'> 呼叫addBars const data_example = [{country: 'USA': 20.8}, {country: 'China': 14.9}, {country: 'Japan': 4.9}, {country: 'Germany': 3.8}, {country: 'France': 2.6}] d3Bar.addBars({data: data}) 选项： 指定画布大小（默认为900 x 600） （自动调整大小以适合画布） d3Bar({data: data,
html+js=条形图
09-09
不错的html js 制成的条形图，绝对实用
js绘制图形（扇形，折状图，柱状图）
01-09
js绘制图形（扇形，折状图，柱状图），例子，js包，很全
【D3.js数据可视化系列教程】--（五）用层画条形图
chaochao466的博客
08-29 304
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 ...
d3js 线条张力图
Anonymous996的博客
08-21 214
d3js 张力图
【D3.js数据可视化系列教程】--（十）更自由的条形图
热门推荐
司机大傻
09-08 1万+
更自由的条形图
D3 js 数据可视化的起点——条形图+柱形图
陈杉菜
03-26 2164
我的第一个？ 嗯 带坐标轴的丑陋且美丽的 条形图 ——介绍完毕，接下来贴代码 我发现，我这个人，啥都不会，却啥都要学 氦，先学着吧 三天前？接触D3 js 啥都，不会，上学期学了点HTML了解了下CSS不知道算不算有点常识，硬着头皮，看了40页的书，对着一个网站，敲的代码。 嗯，说说遇到的奇葩的事情： !一定一定要引用 d3.js 源文件嚯嚯嚯 append 函数和 insert 函数插入元素的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值