D3.js 绘制柱状图

最新推荐文章于 2022-11-30 17:59:50 发布
最新推荐文章于 2022-11-30 17:59:50 发布
阅读量3.5k 收藏 19
点赞数 2
分类专栏： D3 文章标签： D3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/You_Ta/article/details/102505383
版权

使用D3 V4版本绘制

使用D3绘制柱状图，绘制效果如下：

柱状图效果

使用D3绘制柱状图，先对需要绘制的图形拆解，主要分为以下几个部分：
1. 比例尺的定义
2. 坐标轴的绘制
3. 添加矩形
4. 修改坐标轴样式
5. 柱状图装饰效果添加

首先，先定义data

this.graphData = [
  { id:1, name: '数据一', value: 2345 },
  { id:2, name: '数据二', value: 4467 },
  { id:3, name: '数据三', value: 2356 },
  { id:4, name: '数据四', value: 3895 },
  { id:5, name: '数据五', value: 3495 },
  { id:6, name: '数据六', value: 3895 },
  { id:7, name: '数据七', value: 2597 },
  { id:8, name: '数据八', value: 2997 },
];

柱状图X轴展示的数据：

const xData = dataset.map((item) => item.name);
绘制过程如下：

添加画布
首先，图形要添加到画布上：

const width = 650;
const height = 420;
const svg = d3.select(node).append('svg')
    .attr('width', width)
    .attr('height', height);

定义比例尺

const xScale = d3.scaleBand()
    .domain(xData)
    .rangeRound([0, width - paddingLeft - paddingRight])
const yScale = d3.scaleLinear()
    .domain([0, max * 1.5])
    .range([height - paddingTop - paddingBottom, 0]);

scale定义方式不同，则使用方式也是不同。此处xData为离散型数据，对应连续区间，所以使用d3.scaleBand();

关于几种常用比例尺的区别：

1. d3.scaleLinear() 线性比例尺
domain：连续型
range：连续型
使用： scale_l = d3.scaleLinear().domain([1,10]).range([0,100])
2. d3.scaleOrdinal() 序数比例尺
domain: 离散型
range:离散型
可以简单理解为map映射
使用： scale_o = d3.scaleOrdinal().domain(['a', 'b', 'c']).range([10, 20, 30])
3. d3.scaleBand() 序数比例尺
domain: 离散型
range:连续型
可以理解为用domain将range平均分割
使用： scale_b= d3.scaleBand().domain([1,2,3,4]).range([0,100])
4. d3.scalePoint() 序数比例尺
domain: 离散型
range:连续型
与scaleBand()不同的地方在于带宽为零
使用： scale_p= d3.scalePoint().domain([1,2,3,4]).range([0,100])

关于 Band Scales ：
Band Scales
关于 Point Scales ：
Point Scales

添加坐标轴

// 定义X坐标轴
const xAxis = d3.axisBottom(xScale)
   .ticks(0)
   .tickPadding(12);
// 定义Y坐标轴
const yAxis = d3.axisLeft(yScaleAxis)
   .ticks(5)
   .tickPadding(8)
   .tickFormat(d3.format('d'));
// 添加
svg.append('g')
   .attr('class', 'r-xAxis')
   .attr('transform', `translate(${paddingLeft},${height - paddingBottom})`)
   .call(xAxis);
svg.append('g')
   .attr('class', 'r-yAxis')
   .attr('transform', `translate(${paddingLeft},${paddingTop})`)
   .call(yAxis);

svg 坐标轴原点 (0, 0) 在左上角， y 坐标轴最大值在上方，最小值展示在下方，故yScale domain([0, max * 1.5]) 对应 range([height - paddingTop - paddingBottom, 0]);

y 轴使用了d3.tickFormat，使用请参考 d3.format

添加矩形

yScale.range([0, height - paddingTop - paddingBottom]);

const rectGroup = svg.selectAll('.rectItem')
  .data(dataset)
  .enter()
  .append('g')
  .attr('class', 'rectItem');
rectGroup.append('rect')
  .attr('width', rectWidth)
  .attr('height', (d) => yScale(d.value))
  .attr('y', (d) => height - paddingTop - paddingBottom - yScale(d.value))
  .attr('fill', 'url(#rbGraphsColor)')
  .attr('transform', `translate(${paddingLeft},${paddingTop})`)
  .attr('x', (d) => xScale(d.name) + ((xScale.bandwidth() - rectWidth) / 2));

添加矩形后效果展示

添加矩形后效果展示
设置坐标轴样式

关于坐标轴的构成

<g>
	<!-- 第一个刻度 -->
	<g>
		<line></line>   <!-- 第一个刻度的直线 -->
		<text></text>   <!-- 第一个刻度的文字 -->
	</g>
	<!-- 第二个刻度 -->
	<g>
		<line></line>   <!-- 第二个刻度的直线 -->
		<text></text>   <!-- 第二个刻度的文字 -->
	</g> 
	...
	<!-- 坐标轴的轴线 -->
	<path></path>
</g>

本例中css样式设置：

.r-xAxis, .r-yAxis {
	line {
     	display: none;
    }
    path {
      stroke: #393c45;
    }
    text {
      font-size: 14px;
    }
}

其他

  • 添加柱状图后面网格线
  • 添加数据文字
  • 添加柱状图装饰效果
  • 添加动效

此处只介绍如何添加网格线

svg.selectAll('.r-yAxis .tick')
   .append('line')
   .attr('class', 'row-grid')
   .attr('x1', 0)
   .attr('x2', width - paddingLeft - paddingRight)
   .attr('y1', 0)
   .attr('y2', 0);

 .row-grid {
   display: block;
   stroke: #b4b5b5;
   /* shape-rendering: crispedges;*/
   stroke-width: 1;
   opacity: 0.7;
 }

柱状图添加网格线

最后，附上完整代码：

JS

import * as d3 from 'd3';
export default function graphs(node, dataset) {
    (() => {
        d3.select(node).selectAll('svg').remove();
    })();

    // ***************数据初始化*******************
    const width = node.offsetWidth;
    const height = node.offsetHeight;
    const paddingTop = 60;
    const paddingBottom = 98;
    const paddingLeft = 90;
    const paddingRight = 24;
    const rectWidth = 40;
    const decoRectWidth = 2;
    const delay = 0;
    const duration = 2000;
    const max = Math.max(...dataset.map((item) => item.value));

    const xData = dataset.map((item) => item.name); // 对接数据时根据name名创建

    /****************************** 比例尺 ***************************************/
    const xScale = d3.scaleBand()
        .domain(xData)
        .rangeRound([0, width - paddingLeft - paddingRight])
    const yScale = d3.scaleLinear()
        .domain([0, max * 1.5])
        .range([height - paddingTop - paddingBottom, 0]);

    // 绘制
    const svg = d3.select(node).append('svg')
        .attr('width', width)
        .attr('height', height);
    // 坐标轴
    const xAxis = d3.axisBottom(xScale)
        .ticks(0)
        .tickPadding(12);
    const yAxis = d3.axisLeft(yScale)
        .ticks(5)
        .tickPadding(8)
        .tickFormat(d3.format('d'));
    // ***************坐标轴***************
    svg.append('g')
        .attr('class', 'r-xAxis')
        .attr('transform', `translate(${paddingLeft},${height - paddingBottom})`)
        .call(xAxis);

    svg.append('g')
        .attr('class', 'r-yAxis')
        .attr('transform', `translate(${paddingLeft},${paddingTop})`)
        .call(yAxis);
    // 添加横向网格线
    svg.selectAll('.r-yAxis .tick')
        .append('line')
        .attr('class', 'row-grid')
        .attr('x1', 0)
        .attr('x2', width - paddingLeft - paddingRight)
        .attr('y1', 0)
        .attr('y2', 0);

    // ***************矩形图******************
    yScale.range([0, height - paddingTop - paddingBottom]);

    const rectGroup = svg.selectAll('.rectItem')
        .data(dataset)
        .enter()
        .append('g')
        .attr('class', 'rectItem');

    rectGroup.append('rect')
        .attr('width', rectWidth)
        .attr('height', 0)
        .attr('y', height - paddingTop - paddingBottom)
        .attr('fill', 'url(#rbGraphsColor)')
        .attr('transform', `translate(${paddingLeft},${paddingTop})`)
        .attr('x', (d) => xScale(d.name) + ((xScale.bandwidth() - rectWidth) / 2))
        .transition()
        .delay(delay)
        .duration(duration)
        .attr('height', (d) => yScale(d.value))
        .attr('y', (d) => height - paddingTop - paddingBottom - yScale(d.value));
    // 中间装饰矩形
    rectGroup.append('rect')
        .attr('width', decoRectWidth)
        .attr('height', 0)
        .attr('y', height - paddingTop - paddingBottom)
        .attr('fill', '#30ca6e')
        .attr('opacity', 0.6)
        .attr('transform', `translate(${paddingLeft},${paddingTop})`)
        .attr('x', (d) => xScale(d.name) + ((xScale.bandwidth() - decoRectWidth) / 2))
        .transition()
        .delay(delay)
        .duration(duration)
        .attr('height', (d) => yScale(d.value))
        .attr('y', (d) => height - paddingTop - paddingBottom - yScale(d.value));
    // 上方装饰矩形
    rectGroup.append('rect')
        .attr('width', rectWidth)
        .attr('height', 2)
        .attr('y', height - paddingTop - paddingBottom - 4)
        .attr('fill', '#32dd77')
        .attr('transform', `translate(${paddingLeft},${paddingTop})`)
        .attr('x', (d) => xScale(d.name) + ((xScale.bandwidth() - rectWidth) / 2))
        .transition()
        .delay(delay)
        .duration(duration)
        .attr('y', (d) => height - paddingTop - paddingBottom - yScale(d.value));

    rectGroup.append('text')
        .text((d) => d.value)
        .attr('y', height - paddingTop - paddingBottom)
        .attr('class', 'valueDes')
        .attr('transform', `translate(${20},${paddingTop - 5})`)
        .attr('x', (d) => xScale(d.name) + ((xScale.bandwidth() - rectWidth) / 2) + paddingLeft)
        .transition()
        .delay(delay)
        .duration(duration)
        .attr('y', (d) => height - paddingTop - paddingBottom - yScale(d.value));

    const xyLine = svg.append('g')
        .attr('class', 'lineGroup');
    // x
    xyLine.append('line')
        .attr('class', 'xyLine')
        .attr('x1', paddingLeft - 1)
        .attr('x2', width - paddingRight)
        .attr('y1', height - paddingBottom)
        .attr('y2', height - paddingBottom);
    // y
    xyLine.append('line')
        .attr('class', 'xyLine')
        .attr('x1', paddingLeft)
        .attr('x2', paddingLeft)
        .attr('y1', paddingTop)
        .attr('y2', (height - paddingBottom) + 1);
}

CSS

svg {
  .valueDes {
    text-anchor: middle;
    font-size: 14px;
    fill: #c4c4c4;
  }
  .r-xAxis {
    path, line {
      display: none;
    }
    text {
      font-size: 14px;
      color: #fdfdfd;
    }
  }
  .r-yAxis {
    path, line {
      display: none;
    }
    text {
      font-size: 14px;
      color: #c4c4c4;
    }
    .row-grid {
      display: block;
      stroke: #393c45;
      stroke-width: 1;
      opacity: 0.7;
    }
  }
  .xyLine {
    stroke: #393c45;
    stroke-width: 1;
  }
}
参考文章 :
RongJoy
关注
  • 2
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
使用d3.js实现柱状图
06-14
使用d3.js实现柱状图使用d3.js实现柱状图使用d3.js实现柱状图使用d3.js实现柱状图
d3.js做的柱状图
anlin9217的博客
04-09 210
window.onload = function(){ var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30]; var height = 400,width = 900; var padding = {left:30, right:30, top:20, bottom:20}; var rectPadding = 4; var...
d3.js柱状图
10-26
d3.js柱状图gif图片
D3.js-柱形图
李刚的学习专栏
10-08 7529
柱形图，是使用柱形的长短来表示数据变化的图表，也是最简单的图表之一。一般情况下，柱形图包括：矩形、坐标轴和文字。 一、矩形和文字定义一个数组，每个数据项表示矩形的长短：var dataset = [50, 43, 120, 87, 99, 167, 142]; // 数据集定义一个SVG，表示绘制区域：var width = 400; // svg可视区域宽度 var height = 40
D3绘制柱状图
Cupid
04-23 347
D3绘制柱状图 本文绘制一个横向的柱形图。只绘制矩形，不绘制文字和坐标轴 // 在 SVG 中，矩形的元素标签是 rect。例如： <svg> <rect></rect> <rect></rect> </svg> 上面的 rect 里没有矩形的属性。矩形的属性，常用的有四个： ​ x：矩形左上角的 x 坐标 ...
d3.js 绘制心电图以及网格
03-09
d3.js 绘制心电图以及网格
D3.js实现柱状图的方法详解
11-26
如何用D3.js实现柱状图？ 柱状图里面有坐标轴和柱子。然而我们还需要SVG画布来画这些东西。先把大概的画图框架搭起来，代码如下（请注意此时我在body标签里添加了D3.js的script标签。这样我们后面才能使用D3的方法...
使用d3.js实现的柱状图效果，带坐标轴
03-20
使用d3.js实现的柱状图效果，带坐标轴，可以直接下载使用。
D3.js实现拓扑图的示例代码
10-18
本篇文章主要介绍了D3.js实现拓扑图的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
d3js绘制多系统柱形图
01-29
d3js 多系统柱形图
D3绘制水平柱状图
weixin_33887443的博客
04-04 335
一、前言根据需要，Boss让你绘制水平的柱状图，左边显示昨天的数据，今天显示今天的数据。用D3画图二、仿造数据today.csvname,value,unit A,2000,% B,1000,t C,1400,￥ D,32,d E,520,d F,10000,d G,5500,元 H,740,t I,850,t J,950,t K,1100,t L,1200,tyesterd...
D3--------绘制柱状图
qq_39579290的博客
04-25 754
D3之柱状图动态增加与删除
D3.js入门篇-柱状图
Waiting4U
09-02 1911
引言 最近项目中有个新feature需要画一个业务流程的拓扑图，需要用到d3绘制，在这里记录一下学习过程，由于对前端不太熟悉，svg也是刚接触，所以进度感人（手动滑稽），好，进入正题，本篇使用d3完成一个简单的柱状图。 D3 柱状图 首先造一点json格式的数据： **data.json** { &quot;data&quot;:[ {&quot;value&quot;:123}, {&quot;value&quot;:432}, ..
图形化开发（四）04-D3.js之实践——柱状图详细版demo
weixin_44867717的博客
09-22 253
图形化开发（四）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常用的几种柱状图
JackieDYH的博客
07-31 1265
使用d3直方图布局 d3的所有布局都不会帮你作图，只是帮你按需处理的数据。 使用d3.randomBates构造一组1000个具有贝茨分布规律并且在1~0的随机数，使用d3.histogram()直方图布局处理数据。统计数据在每个x轴频段出现的频率。然后作出柱状图。 处理后的数据 x0、x1：起始及终止的x坐标，length：出现的频数，数组里其他的即为在此频段的数据。 <!DOCTYPE html> <html> <head> <.
运用D3.js实现柱状图
m0_46390103的博客
11-30 383
D3.js实现柱状图
如何使用D3.js简单的制作可交互柱状图（完整代码）
mclryan的博客
02-22 5110
前言 了解D3是什么，D3的基本用法 完成一个简易的可交互的柱状图 最近假期写了点东西，趁略有闲余之时，玩了一下D3，之前项目中主要是用各类charts，比如Echarts，诸如此类还有highCharts等，不过那种是用别人写好的库，添加好数据就完成了，就是配置的问题，这种类库最大的问题是定制很难，而D3是自己制作图形，可定制方面比较强，自由度很大，做完之后还是感觉很爽的 现在是数据时代，...
可视化工具D3.js教程 入门 （第八章）—— 一个简单柱状图
weixin_44867717的博客
09-23 357
可视化工具D3.js教程 入门 （第八章）—— 一个简单柱状图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://d3js.org/d3.v5.min.js"></script> </head> <bod
【一起学D3.js】（五）实现一个柱状图
weixin_44045702的博客
06-16 848
用D3画一个柱状图
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`方法设置颜色。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值