由于最近工作不是很忙,隧由把之前的charts项目用d3.js重写的一下,其实d3.js文档很多,但是入门不是很难,可是想真的能做一个完成的,交互良好的图还是要下一番功夫的。今天在echarts找到了一个柱状图,如图。

模仿了一番,废话不多说。下面就开始我们的代码(注意是D3.v4版本)。

1. js 类

class Bar {
constructor() {
this._width = 1000;
this._height = 700;
this._padding = 10;
this._offset = 35;
this._margins = {right: 40,bottom: 40,left: 40,top: 40};
this._scaleX = d3.scaleBand().rangeRound([0, this._width - this._margins.left - this._margins.right]);
this._scaleY = d3.scaleLinear().range([this._height - this._margins.top - this._margins.bottom, 0]);
this._color = '#3398DB';
this._data = [];
this._svg = null;
this._body = null;
this._tooltip = null;
this._shadow = null;
this._ticks = 5;
this._key = 'key';
this._value = 'value';
}
render() {
if(!this._tooltip) {
this._tooltip = d3.select('body')
.append('div')
.style('left', '40px')
.style('top', '30px')
.attr('class', 'tooltip')
.html('');
}
if(!this._svg) {
this._svg = d3.select('body')
.append('svg')
.attr('width', this._width)
.attr('height', this._height)
this.renderAxes();
this.renderClipPath();
}
this.renderBody();
}
renderAxes() {
let axes = this._svg.append('g')
.attr('class', 'axes'); this.renderXAxis(axes);
this.renderYAxis(axes);
}
renderXAxis(axes) {
let xAxis = d3.axisBottom().scale(this._scaleX)
axes.append('g')
.attr('class', 'x axis')
.attr('transform', `translate(${this.xStart()}, ${this.yStart()})`)
.call(xAxis)
}
renderYAxis(axes) {
let yAxis = d3.axisLeft().scale(this._scaleY).ticks(this._ticks);
axes.append('g')
.attr('class', 'y axis')
.attr('transform', `translate(${this.xStart()}, ${this.yEnd()})`)
.call(yAxis) d3.selectAll('.y .tick')
.append('line')
.attr('class', 'grid-line')
.attr('x1', 0)
.attr('y1', 0)
.attr('x2', this.quadrantWidth())
.attr('y2', 0)
}
renderClipPath() {
this._svg.append('defs')
.append('clip-path')
.attr('id', 'body-clip')
.append('rect')
.attr('x', 0)
.attr('y', 0)
.attr('width', this.quadrantWidth())
.attr('height', this.quadrantHeight())
}
renderBody() {
if(!this._body) {
this._body = this._svg.append('g')
.attr('class', 'body')
.attr('transform', `translate(${this._margins.left},${this._margins.top})`)
.attr('clip-path', 'url(#clipPath)')
this.renderShadow()
}
this.renderBar();
this.listenMousemove();
}
renderShadow() {
this._shadow = this._body.append('rect')
.attr('x', 0)
.attr('y', 0)
.attr('width', this.everyWidth())
.attr('height', this._scaleY(0))
.attr('fill', '#000')
.attr('fill-opacity', 0)
}
renderBar() {
let barElements = this._body
.selectAll('rect.bar')
.data(this._data); let barEnter = barElements
.enter()
.append('rect')
.attr('class', 'bar')
.attr('x', d => this._scaleX(d[this._key]) + this.everyWidth() * 0.18)
.attr('y', () => this._scaleY(0))
.attr('width', this.everyWidth() * 0.64)
.attr('height', () => this.quadrantHeight() - this._scaleY(0)) let barUpdate = barEnter
.merge(barElements)
.transition()
.duration(800)
.ease(d3.easeCubicOut)
.attr('y', d => this._scaleY(d[this._value]))
.attr('height', d => {
console.log(this.quadrantHeight() - this._scaleY(d[this._value]))
return this.quadrantHeight() - this._scaleY(d[this._value])
}); let barExit = barElements
.exit()
.transition()
.attr('y', () => this._scaleY(0))
.attr('height', () => this.quadrantHeight() - this._scaleY(0))
.remove();
}
listenMousemove() {
this._svg.on('mousemove', () => {
let px = d3.event.offsetX;
let py = d3.event.offsetY;
if(px < this.xEnd() && px > this.xStart() && py < this.yStart() && py > this.yEnd()) {
this.renderShadowAndTooltip(px, py, px - this.xStart());
} else {
this.hideShadowAndTooltip();
}
})
}
renderShadowAndTooltip(x, y, bodyX) {
let cutIndex = Math.floor(bodyX / this.everyWidth());
this._shadow.transition().duration(50).ease(d3.easeLinear).attr('fill-opacity', .12).attr('x', cutIndex * this.everyWidth());
if(x > this.quadrantWidth() - this._tooltip.style('width').slice(0,-2) - this._padding * 2) {
x = x - this._tooltip.style('width').slice(0,-2) - this._padding * 2 - this._offset * 2;
}
if(y > this.quadrantHeight() - this._tooltip.style('height').slice(0,-2) - this._padding * 2) {
y = y - this._tooltip.style('height').slice(0,-2) - this._padding * 2 - this._offset * 2;
}
this._tooltip.html(`${this._data[cutIndex][this._key]}<br/>数量统计: ${this._data[cutIndex][this._value]}`).transition().duration(100).ease(d3.easeLinear).style('display', 'inline-block').style('opacity', .6).style('left', `${x + this._offset + this._padding}px`).style('top', `${y + this._offset + this._padding}px`);
}
hideShadowAndTooltip() {
    this._shadow.transition().duration(10).attr('fill-opacity', 0);
    this._tooltip.transition().duration(50).style('opacity', 0).on('end', function() {d3.select(this).style('display', 'none')})
  }
everyWidth() {
return this.quadrantWidth() / this._data.length;
}
quadrantWidth() {
return this._width - this._margins.left - this._margins.right;
}
quadrantHeight() {
return this._height - this._margins.top - this._margins.bottom;
}
xStart() {
return this._margins.left;
}
xEnd() {
return this._width - this._margins.right;
}
yStart() {
return this._height - this._margins.bottom;
}
yEnd() {
return this._margins.top;
}
scaleX(a) {
this._scaleX = this._scaleX.domain(a);
}
scaleY(a) {
this._scaleY = this._scaleY.domain(a)
}
key(k) {
if(!arguments.length) return this._key;
this._key = k;
this.scaleX(this._data.map(d => d[this._key]))
return this;
}
value(v) {
if(!arguments.length) return this._value;
this._value = v;
let arr = this._data.map(d => d[this._value]);
let ele = Math.pow(10, d3.max(arr).toString().length - 1);
let max = Math.ceil(d3.max(arr) / ele) * ele;
this.scaleY([0, max]);
return this;
}
data(data) {
if(!arguments.length) return this._data;
this._data = data;
return this;
}
}

2 CSS 文件很简单

.domain {
stroke-width:;
fill: none;
stroke: #888;
shape-rendering: crispEdges;
}
.x .tick line {
opacity: 0 ;
}
.tick text {
font-size: 14px;
}
.grid-line {
fill: none;
stroke: #888;
opacity: .4;
shape-rendering: crispEdges;
}
.bar {
fill: #3398DB;
}
.tooltip{
font-size: 15px;
width: auto;
padding: 10px;
height: auto;
position: absolute;
text-align: center;
background-color: #000000;
opacity: .6;
border-radius:5px;
color: #ffffff;
display: none;
}

3 加下来就是html文件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$Title$</title>
<link rel="stylesheet" type="text/css" href="css/base.css"/>
<script type="text/javascript" src="js/d3.v4.js"></script>
<script type="text/javascript" src="js/bar.js"></script>
</head>
<body>
<script>
var dataset = [{date: 'Mon', label: 15},{date: 'Tue', label: 52},{date: 'Wed', label: 200},{date: 'Thu', label: 235},{date: 'Fri', label: 390},{date: 'Sat', label: 330},{date: 'Sun', label: 221}];
var bar = new Bar();
bar
.data(dataset)
.key('date')
.value('label')
.render();
</script>
</body>
</html>

4 接着是效果图

新上手的朋友们可以先学习一下ES6,然后在学习类的思想,d3.v3和v4 v5的版本差异比较大,直接学习d3.v4就可以了,最最后推荐一本书。D3 4.x数据可视化实战手册。这本书比较基础但是能够通过它养成良好的d3编程习惯。祝大家d3学习顺利。

如果想下载代码或者预览这个DEMO请移步到原文!!!

原文链接:http://www.bettersmile.cn

d3.js 教程 模仿echarts柱状图的更多相关文章

  1. d3.js 教程 模仿echarts折线图

    今天我们来仿echarts折线图,这个图在echarts是折线图堆叠,但是我用d3改造成了普通的折线图,只为了大家学习(其实在简单的写一个布局就可以).废话不多说商行代码. 1 制作 Line 类 c ...

  2. d3.js 教程 模仿echarts legend功能

    上一节记录没有加上echarts的legend功能,这一小节补一下. 1. 数据 我们可以从echarts中看出,折线数据并不是我们传进入的原始数据(多数情况下我们也不会修改原始数据),而是原始数组的 ...

  3. javascript实例教程使用canvas技术模仿echarts柱状图

    canvas 画布是HTML5中新增的标签,可以通过js操作 canvas 绘图 API在网页中绘制图像. 百度开发了一个开源的可视化图表库ECharts,功能非常强大,可以实现折线图.柱状图.散点图 ...

  4. D3.js的v5版本入门教程(第三章)—— 选择元素和绑定数据

    D3.js的v5版本入门教程(第三章) 在D3.js中,选择元素和绑定元素是最基本的内容,也是很重要的内容,等你看完整个教程后你会发现,这些D3.js教程都是在选择元素和绑定元素的基础上展开后续工作的 ...

  5. D3.js的v5版本入门教程(第九章)——完整的柱状图

    D3.js的v5版本入门教程(第九章) 一个完整的柱状图应该包括的元素有——矩形.文字.坐标轴,现在,我们就来一一绘制它们,这章是前面几章的综合,这一章只有少量新的知识点,它们是 d3.scaleBa ...

  6. D3.js 入门教程

    最近需要用到d3, 记录下d3的教程 网上搜了几个关于d3的教程 D3.js 入门教程      http://wiki.jikexueyuan.com/project/d3wiki/author.h ...

  7. 页面生成柱状图 --- D3.js

    转载自:https://www.cnblogs.com/fastmover/p/7779660.html D3.js从入门到"放弃"指南 前言 近期略有点诸事不顺,趁略有闲余之时, ...

  8. D3.js的v5版本入门教程(第十一章)——交互式操作

    D3.js的v5版本入门教程(第十一章) 与图形进行交互操作是很重要的!所谓的交互操作也就是为图形元素添加监听事件,比如说当你鼠标放在某个图形元素上面的时候,就会显示相应的文字,而当鼠标移开后,文字就 ...

  9. D3.js的v5版本入门教程(第八章)—— 坐标轴

    D3.js的v5版本入门教程(第八章) D3中没有现成的坐标轴图形,需要我们自己用其他组件拼凑而成.D3中提供了坐标轴组件,使得我们在SVG中绘制一个坐标轴变得像添加一个普通元素那样简单 为了表绘制一 ...

随机推荐

  1. Swagger UI使用指南

    1:认识Swagger Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.总体目标是使客户端和文件系统作为服务器以同样的速度来更新.文件的方法 ...

  2. CMS简单内容管理系统

    架构 NewsDaoSQLServerImpl public class NewsDaoSQLServerImpl extends BaseDao implements NewsDao { publi ...

  3. WPF 动态添加按钮以及样式字典的引用(Style introduction)

    我们想要达到的结果是,绑定多个Checkbox然后我们还可以获取它是否被选中,其实很简单,我们只要找到那几个关键的对象就可以了. 下面是Ui,其中定义了一个WrapPanel来存放CheckBox,还 ...

  4. Selenium浏览器自动化测试框架

    selenium简介 介绍 Selenium [1]  是一个用于Web应用程序测试的工具.Selenium测试直接运行在浏览器中,就像真正的用户在操作一样.支持的浏览器包括IE(7, 8, 9, 1 ...

  5. 【iOS】iOS main() 简介

    C 语言编写的程序,其执行入口都是 main(). 用 Objective-C 语言编写的程序也是这样. main.m 中的代码如下: int main(int argc, char * argv[] ...

  6. ubuntu/deepin 下下载wxpython

    1 输入apt-cache search wxpython 如果有返回信息 则输入 sudo apt-get install python-tools 2 否则 1.添加软件源地址到apt列表中.输入 ...

  7. Spring源码解析——循环依赖的解决方案

    一.前言 承接<Spring源码解析--创建bean>.<Spring源码解析--创建bean的实例>,我们今天接着聊聊,循环依赖的解决方案,即创建bean的ObjectFac ...

  8. spring-boot-plus1.2.0-RELEASE发布-快速打包-极速部署-在线演示

    spring-boot-plus 一套集成spring boot常用开发组件的后台快速开发脚手架 Purpose 每个人都可以独立.快速.高效地开发项目! Everyone can develop p ...

  9. 在docker中开启新的container

    当你在启动某个容器类型的时候  如果产生了类似的错误: docker: Error: No such image: b27f5dfcfc70c16d7b135889460def6b3f831bcc72 ...

  10. Paxos算法原理

    1.从ACID到CAP 我们知道传统集中式系统中实现ACID是很简单的,在分布式环境中,涉及到不同的节点,节点内的ACID可以控制,那么节点间的ACID如何控制呢?构建一个可用性和一致性的分布系统成为 ...