杰晶网络

D3.js实现柱状图的方法详解
网络编程 2024/11/9 佚名
3 2

D3.js介绍

D3.js 是一个基于数据操作文档JavaScript库。D3帮助你给数据带来活力通过使用HTML、SVG和CSS。D3重视Web标准为你提供现代浏览器的全部功能，而不是给你一个专有的框架。结合强大的可视化组件和数据驱动方式Dom操作。这里也可以看到它是用SVG来呈现图表的，所以使用D3.js是需要一定的SVG基础的。

如何用D3.js实现柱状图？

柱状图里面有坐标轴和柱子。然而我们还需要SVG画布来画这些东西。先把大概的画图框架搭起来，代码如下（请注意此时我在body标签里添加了D3.js的script标签。这样我们后面才能使用D3的方法）：

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>柱状图</title>
  <style>
   .container {
    margin: 30px auto;
    width: 600px;
    height: 300px;
    border: 1px solid #000;
   }
  </style>
 </head>
 <body>
  <div class="container">
   <svg width="100%" height="100%"></svg>
  </div>
  <script src="/UploadFiles/2021-04-02/d3.v3.min.js">


坐标轴的实现


为了把真实的数据与SVG画布上的坐标轴上的坐标联系起来，我们需要定义比例尺来描述这样的对应关系。D3中常用的比例尺有线性比例尺和序数比例尺，它们的区别如图所示：


D3.js实现柱状图的方法详解


从图上可以看出，线性比例尺的对应关系是连续的，而序数比例尺的对应关系是离散的。分析柱状图的展现意义可以得出x轴应该选用序数比例尺，而y轴选用线性比例尺。





// 模拟数据
var dataset = {
 x: ["赵","钱","孙","李","周","吴","郑","王"],
 y: [40, 30, 50, 70, 90, 20, 10, 40]
};
// 定义x轴的比例尺(序数比例尺)
var xScale = d3.scale.ordinal()
  .domain(dataset.x)
  .rangeRoundBands([0, width - padding.left - padding.right],0,0);
// 定义y轴的比例尺(线性比例尺)
var yScale = d3.scale.linear()
  .domain([0, d3.max(dataset.y)])
  .range([height - padding.top - padding.bottom, 0]);
// 定义x轴和y轴
var xAxis = d3.svg.axis()
  .scale(xScale)
  .orient('bottom');
var yAxis = d3.svg.axis()
  .scale(yScale)
  .orient('left');
// 添加坐标轴元素
main.append('g')
  .attr('class', 'axis')
  .attr('transform', 'translate(0,' + (height - padding.bottom - padding.top) + ')')
  .call(xAxis);
main.append('g')
  .attr('class', 'axis')
  .call(yAxis); 





我们模拟了一些数据，每个姓氏对应了一个数值（从这里也可以看出序数比例尺的定义域上的值不一定是连续关系）。d3.scale.ordinal()创建了一个序数比例尺，而ordinal.domain()设置了该比例尺的定义域，ordinal.rangRoundBands()设置了值域。同理，d3.scale.linear()创建了一个线性比例尺，linear.domain()定义定义域，linear.range()定义值域。接着，我们用d3.svg.axis()创建了两个坐标轴，把比例尺应用到它们上面，并且用axis.orient()设置了坐标轴的刻度尺的方向。最后，添加SVG元素，用call()把定义好的坐标轴与SVG元素联系起来。通过设置它们的transform属性来移动元素，使它们看起来像是一个坐标系。


这里需要注意以下几点：


     1、ordinal.domain的参数是一个表示一系列值的数组，而linear.domain的参数是一个表示范围的数组。




     2、比例尺的本质是一个函数，它接收定义域上的值来得出对应的值域上的值。




应用序数比例尺的坐标轴与线性比例尺的有很大不同，这里大概说明一下。


D3.js实现柱状图的方法详解


"htmlcode">



var o = d3.scale.ordinal()
 .domain([0, 1, 2])
 .rangeRoundBands([0, 100], 0.4, 0.1);





"htmlcode">



.axis path,
.axis line {
 stroke: #000;
 fill: none;
}





最终得到的柱状图的坐标轴如下图所示：


D3.js实现柱状图的方法详解


柱子的实现


柱子无非就是一个个矩形，在SVG中可以使用rect元素来画。先选择到main下所有bar类的元素（此时选择到的是一个空的集合），把dataset.y绑定到这个集合上，用enter()对比绑定的数组元素个数与集合中的SVG元素个数，与append()搭配使用，会自动补齐至两边个数相等。每一次的append都对应dataset.y中的一个数组元素。利用前面创建的比例尺函数计算出值并赋给举行元素的x、y属性。具体的代码如下：





// 矩形之间的间距
var rectMargin = 10;
// 添加矩形
main.selectAll('.bar')
  .data(dataset.y)
  .enter()
  .append('rect')
  .attr('class', 'bar')
  .attr('x', function(d, i) {
   return xScale(dataset.x[i]) + rectMargin;
  })
  .attr('y', function(d, i) {
   return yScale(d);
  })
  .attr('width', xScale.rangeBand() - 2*rectMargin)
  .attr('height', function(d, i) {
   return height - padding.top - padding.bottom - yScale(d);
  })
  .attr('fill', function(d, i) {
   return getColor(i);
  });





至此，得到了如下图所示的柱状图。


D3.js实现柱状图的方法详解


总结


以上就是利用D3.js实现柱状图的全部内容，感兴趣的朋友们可以自己动手实践下，这样更利于大家的理解和学习，希望这篇文章对大家的学习和工作能有所帮助。如果有疑问大家可以留言交流，谢谢大家对的支持，小编还会陆续更新关于D3.js的文章，请继续关注。
标签：
d3.js柱状图,d3.js,画柱状图,d3.js,多列柱状图
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
评论“D3.js实现柱状图的方法详解”
暂无“D3.js实现柱状图的方法详解”评论...
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/9

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网