D3.js 绘制柱状图

最新推荐文章于 2022-11-30 17:59:50 发布
最新推荐文章于 2022-11-30 17:59:50 发布
阅读量3.7k 收藏 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绘制柱状图demo
个人新博客: https://cbbfcd.github.io/
07-05 3777
这个不太难，就随手写了个demo. 完整柱状图demo //1.画布svg var width=400; var height=400;//画布大小 var svg=d3.select("body").append("svg").attr("width",width).attr("height",height);//添加画布 //画布周边留白 var pa
D3--------绘制柱状图
qq_39579290的博客
04-25 776
D3之柱状图动态增加与删除
D3js入门 --- 柱状图的制作
hsany330的专栏
01-15 515
D3js官网：https://d3js.org/ 最近在研究D3js，索性总结一些文档出来，来总结一周以来的学习心得。 D3js官网全英文，相对于Echarts官网详细的文档，英文不好的同学，学起来可能要费劲些，不过有伙伴有中文翻译版的，附上链接：https://github.com/d3/d3/wiki/CN-Home D3Js是什么 D3.js 是基于数据驱动文档工作方式的一款JavaS...
使用d3.js实现柱状图
06-14
使用d3.js实现柱状图使用d3.js实现柱状图使用d3.js实现柱状图使用d3.js实现柱状图
d3.js做的柱状图
anlin9217的博客
04-09 220
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-08 7583
柱形图，是使用柱形的长短来表示数据变化的图表，也是最简单的图表之一。一般情况下，柱形图包括：矩形、坐标轴和文字。 一、矩形和文字定义一个数组，每个数据项表示矩形的长短：var dataset = [50, 43, 120, 87, 99, 167, 142]; // 数据集定义一个SVG，表示绘制区域：var width = 400; // svg可视区域宽度 var height = 40
d3.js柱状图
10-26
d3.js柱状图gif图片
D3绘制柱状图
Cupid
04-23 357
D3绘制柱状图 本文绘制一个横向的柱形图。只绘制矩形，不绘制文字和坐标轴 // 在 SVG 中，矩形的元素标签是 rect。例如： <svg> <rect></rect> <rect></rect> </svg> 上面的 rect 里没有矩形的属性。矩形的属性，常用的有四个： ​ x：矩形左上角的 x 坐标 ...
D3.js实现柱状图的方法详解
11-26
在本文中，我们将深入探讨如何使用D3.js库来实现柱状图的详细步骤。D3.js是一个强大的JavaScript库，它允许开发人员通过HTML、SVG和CSS将数据绑定到文档对象模型(DOM)，并借助数据驱动的方法进行DOM操作，从而为数据...
d3.js绘制柱状图
最新发布
07-17
在d3.js中，绘制柱状图的基本步骤通常涉及以下几个关键步骤： 1. **选择元素**：首先，你需要获取HTML中的容器元素，作为图表的基础。 ```javascript var svg = d3.select('body').append('svg'); ``` 2. **设置...
d3js绘制多系统柱形图
01-29
d3js 多系统柱形图
使用d3.js实现的柱状图效果，带坐标轴
03-20
使用d3.js实现的柱状图效果，带坐标轴，可以直接下载使用。
d3.js绘制柱状图完整代码
07-17
下面是一个简单的D3.js柱状图（bar chart）的完整代码示例，我们将使用HTML、CSS和JavaScript来构建： ```html <!DOCTYPE html> <title>D3.js Bar Chart .bar { fill: steelblue; } text { font: 12px ...
d3.js画柱状图超详细教程
qq5q13638的博客
11-27 4901
d3.js画柱状图超详细教程 废话不说了，有文本编辑器和浏览器就行。 先看效果图 1. 本地创建一个文件夹，名字随便 2. 如何创建一个用于画d3的空白html？ 在文件夹中新建文本文件，将后缀改为.html <!doctype html> <html> <head> <title>D3.js基础教程</title> <script src="https://d3js.org/d3.v5.min.js" charset=
D3绘制水平柱状图
weixin_33887443的博客
04-04 344
一、前言根据需要，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.js入门篇-柱状图
Waiting4U
09-02 1953
引言 最近项目中有个新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 287
图形化开发（四）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 1293
使用d3直方图布局 d3的所有布局都不会帮你作图，只是帮你按需处理的数据。 使用d3.randomBates构造一组1000个具有贝茨分布规律并且在1~0的随机数，使用d3.histogram()直方图布局处理数据。统计数据在每个x轴频段出现的频率。然后作出柱状图。 处理后的数据 x0、x1：起始及终止的x坐标，length：出现的频数，数组里其他的即为在此频段的数据。 <!DOCTYPE html> <html> <head> <.
运用D3.js实现柱状图
m0_46390103的博客
11-30 427
D3.js实现柱状图
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值