由于最近工作不是很忙,隧由把之前的charts项目用d3.js重写的一下,其实d3.js文档很多,但是入门不是很难,可是想真的能做一个完成的,交互良好的图还是要下一番功夫的.今天在echarts找到了一个柱状图,如图. 模仿了一番,废话不多说.下面就开始我们的代码(注意是D3.v4版本). 1. js 类 class Bar { constructor() { this._width = 1000; this._height = 700; this._padding = 10; this._of…

今天我们来仿echarts折线图,这个图在echarts是折线图堆叠,但是我用d3改造成了普通的折线图,只为了大家学习(其实在简单的写一个布局就可以).废话不多说商行代码. 1 制作 Line 类 class Line { constructor() { this._width = 1100; this._height = 800; this._padding = 10; this._offset = 35; this._margins = {right: 50,bottom: 50,left:…

上一节记录没有加上echarts的legend功能,这一小节补一下. 1. 数据 我们可以从echarts中看出,折线数据并不是我们传进入的原始数据(多数情况下我们也不会修改原始数据),而是原始数组的一个备份而已.备份数组的方法有很多.这里我是用了ES6的方法. series(series) { if(!arguments.length) return this._series; this._series = series; let maxY = this.selectMaxYNumber(th…

canvas 画布是HTML5中新增的标签,可以通过js操作 canvas 绘图 API在网页中绘制图像. 百度开发了一个开源的可视化图表库ECharts,功能非常强大,可以实现折线图.柱状图.散点图.饼图.K线图.地图等多种图表.很多项目都有使用过ECharts开发过图表功能. 本实例教程使用原生js教你开发一个仿ECharts的柱状图.学习本教程之前,读者需要具备html和css技能,同时需要有简单的javascript基础. 按照ECharts的开发方法,图表都是生成在一个HTML元素中.…

D3.js的v5版本入门教程(第三章) 在D3.js中,选择元素和绑定元素是最基本的内容,也是很重要的内容,等你看完整个教程后你会发现,这些D3.js教程都是在选择元素和绑定元素的基础上展开后续工作的 1.选择元素 在D3.js中,选择元素的函数有两个 d3.select() d3.selectAll()         这两个函数返回的就是选择集 常见的用法如下: var body = d3.select("body");//选择文档中的body元素 var svg = body.s…

D3.js的v5版本入门教程(第九章) 一个完整的柱状图应该包括的元素有——矩形.文字.坐标轴,现在,我们就来一一绘制它们,这章是前面几章的综合,这一章只有少量新的知识点,它们是 d3.scaleBand():这也是一个坐标轴,可以根据输入的domain的长度,等分rangeRound域(类比range域)d3.range():这个比较复杂,建议去看百度(或者官方API),在这里我只讲一下这个返回一个等差数列    1.得到SVG画布 var marge = {top:60,bottom:60,…

最近需要用到d3, 记录下d3的教程 网上搜了几个关于d3的教程 D3.js 入门教程      http://wiki.jikexueyuan.com/project/d3wiki/author.html 具体在这 作者简介 吕之华 喜欢阅读古籍,看古装剧,热爱传统文化. 喜欢旅游.登山.远足. 生活中有两样不可少:咖啡和葡萄酒. 2014 年与好友创办 OUR D3.JS 数据可视化专题站,以 D3.js 为题发表一系列教学文章,获得读者好评. 本教程即以专题站的文章为基础,整理简化而成.…

转载自:https://www.cnblogs.com/fastmover/p/7779660.html D3.js从入门到"放弃"指南 前言 近期略有点诸事不顺,趁略有闲余之时,玩起D3.js.之前实际项目中主要是用各种chart如hightchart.echarts等,这些图形库玩起来貌都是完美的,一切皆可配置,但几年前接触了D3之后,觉得前面那chart类库局限的地方在于,基本不可定制:而D3呢,你说了算,你想画出什么样的图,你说了算,自由度很大,当时就有点膜拜和仰慕,小打小闹的…

D3.js的v5版本入门教程(第十一章) 与图形进行交互操作是很重要的!所谓的交互操作也就是为图形元素添加监听事件,比如说当你鼠标放在某个图形元素上面的时候,就会显示相应的文字,而当鼠标移开后,文字就会消失,或者鼠标单击一下某图形元素就会使它动起来 为了与图形元素进行交互操作,我们还是需要以下新的知识点 on("eventName",function):该函数是添加一个监听事件,它的第一个参数是事件类型,第二个参数是响应事件的内容d3.select(this),选择当前元素    常见…

D3.js的v5版本入门教程(第八章) D3中没有现成的坐标轴图形,需要我们自己用其他组件拼凑而成.D3中提供了坐标轴组件,使得我们在SVG中绘制一个坐标轴变得像添加一个普通元素那样简单 为了表绘制一个坐标轴,我们还是需要以下新的知识点 call()函数        定义一个坐标轴 坐标轴是有朝向的,在这里我们以向下朝向.水平方向的坐标轴为例,其他朝向的(比如向左朝向的.垂直的坐标轴)类似,这里是接着上一章来的,数据用的也是上一章的 //为坐标轴定义一个线性比例尺 var xScale = d…