D3.js V5 教程

D3.js V5 教程 1.在项目中使用D3.js 2. 选择元素和设置(获取)属性 3. 绑定数据 4. 理解Update.Enter.Exit 与添加.删除元素未完待续..........…

D3.js v5 Tutorials D3.js v5 教程 https://github.com/d3/d3/blob/master/API.md CHANGES https://github.com/d3/d3/blob/master/CHANGES.md 0xfffff & .toString(16) 16 进制转换 d3-scale https://github.com/d3/d3-scale#installing # d3 global is exported $ npm i -S d…

D3.js 入门教程

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

d3.js V5版本在vue里使用自定义节点图片

var width = this.$refs.topInfo.offsetWidth; var height = this.$refs.topInfo.offsetHeight; var img_w = 77; var img_h = 80; var radius = 30; //console.log(width,height) var svg = d3.select("#forceDirected") .append("svg") .attr("wid…

D3.js 使用心得

教程 D3.js 入门教程系列 http://www.ourd3js.com/wordpress/296/ 全球地图数据…

用 D3.js 画一个手机专利关系图, 看看苹果,三星,微软间的专利纠葛

前言本文灵感来源于Mike Bostock 的一个 demo 页面原 demo 基于 D3.js v3 开发, 笔者将其使用 D3.js v5 进行重写, 并改为使用 ES6 语法. 源码: github 在线演示 : demo 效果可以看到, 上图左上角为图例, 中间为各个手机公司之间的专利关系图. 图例中有三种线段: 红色实线: 正在进行专利诉讼 (箭头指向方为被诉讼方) 蓝色虚线: 诉讼已经结束绿色实线: 专利已经授权实现下面让我们看看如何一步步实现上图的效果. 分析数据 […

D3.js的v5版本入门教程（第十三章）—— 饼状图

D3.js的v5版本入门教程(第十三章) 这一章我们来绘制一个简单的饼状图,我们只绘制构成饼状图基本的元素——扇形.文字,从这一章开始,内容可能有点难理解,因为每一章都会引入比较多的难理解知识点,在这里作者本人也只是粗略的讲解每个新知识点的意思!如果不是很理解的话,需要读者自行查看官网API 为了绘制一个饼状图,我们还是需要以下新的知识点 d3.arc( {} ),弧形生成器,用以绘制弧形,需要传入一些用以绘制弧形基本的数据的对象,例如,该对象的属性可以包括(我用官网api的示例) d3.pie…

D3.js的v5版本入门教程（第十二章）—— D3.js中各种精美的图形

D3.js的v5版本入门教程(第十二章) D3中提供了各种制作常见图形的函数,在d3的v3版本中叫布局,通过d3.layout.xxx,来新建,但是到了v5,新建一个d3中基本的图形的方式变了(我也并不知道是不是还叫布局,我觉得也可以这么叫,反正布局指的也是一个绘图函数) 下面是d3中一些常见的部分图形 bubble —— 泡泡图 packing —— 打包图 bundling —— 捆图 force —— 力导向图 chord —— 弦图 pie——饼状图 tree——树状图中国地图我们利…

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

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

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

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

D3.js的v5版本入门教程（第八章）—— 坐标轴

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

D3.js的v5版本入门教程（第七章）—— 比例尺的使用

D3.js的v5版本入门教程(第七章) 比例尺在D3.js中是一个很重要的东西,我们可以这样理解d3.js中的比例尺——一种映射关系,从domain映射到range域(为什么会是domain和range呢?等一下你就会看到,因为我们在建立比例尺是常常会用到domain()和range()两个函数,当然不是绝对的,D3中有很多类型的比例尺) 下面介绍在本套教程中常用的两种比例尺线性比例尺序数比例尺线性比例尺 domain域和range域都可以连续变化 <body> <sc…

D3.js的v5版本入门教程（第五章）—— 选择、插入、删除元素

D3.js的v5版本入门教程(第五章) 1.选择元素现在我们已经知道,d3.js中选择元素的函数有select()和selectAll(),下面来详细讲解一下假设我们的<body>中有三个,如下 dog cat pig rat 选择第一个元素 var p = d3.select("body&qu…

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

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版本入门教程（第四章）—— 理解Update、Enter、Exit

D3.js的v5版本入门教程(第四章) Update.Enter.Exit是D3.js中很重要的概念,下面来讲一下它们到底是什么?(当你看完后.你就会知道如果数据集个数和选择集个数不匹配的情况下使用data(),D3.js会怎么办) 在使用data()时,例如现在我们有一个数组[3,6,9,12,15],我们可以将数组每一项与一个绑定,但是,现在就有一个问题——数据集个数和选择集个数不匹配怎么办?这样就需要理解Update.Enter.Exit 例子一:update和enter:数组[3…

【D3.V3.js系列教程】--（十四）有路径的文字

[D3.V3.js系列教程]--(十四)有路径的文字 1. 在 svg 中插入一個 text // 在 body 中插入一個 svg var svg = d3.select('body').append('svg'); // 在 svg 中插入一個 text svg.append('text') .attr('x', 10) .attr('y', 20) .style('fill', 'steelblue') .style('font-size', '24px') .style('font-…

【D3.V3.js系列教程】--（十五）SVG基本图形绘制

[D3.V3.js系列教程]--(十五)SVG基本图形绘制 1.path <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>testD3-13-path.html</title> <script type="text/javascript" src="http://localhost:8080/spring/j…

【D3.V3.js系列教程】--（十二）坐标尺度

[D3.V3.js系列教程]--(十二)坐标尺度 1.多种类型的缩放尺度 Quantitative Scales Linear Scales Identity Scales Power Scales 可以参考https://github.com/mbostock/d3/wiki/Quantitative-Scales 我们一般采用线性缩放 2.定义域和值域定义域范围domain([100, 500]) 值域范围.range([10, 350]) var scale = d3.scale.lin…

d3.js 教程模仿echarts柱状图

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

使用D3.js构建实时图形

首先你需要在计算机上安装Node和npm. 数据的可视化表示是传递复杂信息的最有效手段之一,D3.js提供了创建这些数据可视化的强大工具和灵活性. D3.js是一个JavaScript库,用于使用SVG,HTML和CSS在Web浏览器中生成动态的交互式数据可视化. 在本教程中,我们将探讨如何使用D3.js和Pusher Channels构建实时图形.如果您在阅读本教程时想要使用代码,请查看此GitHub存储库,其中包含代码的最终版本. 准备要完成本教程,您需要安装Node.js和npm.我在创…

D3.js学习（一）

从今天开始我将和大家一起学习D3.js(Data-Driven Documents),由于国内关于D3的学习资料少之又少,所以我觉得很有必要把自己学习过程记录下来,供同学们参考,如果文章有有哪些表达有错误的还希望同学们帮我指出来.当然了, 可以的话我希望大家都可以去看看英文资料(文章后面将列英文资源),毕竟那才是原汁原味的D3. 好了, 废话到此,下面我们开始我们的学习之旅吧! 什么是D3.js? 一句话:D3.js是一个操纵数据的javascript库! 从一个简单的例子开始学习一个新的东西…

【 D3.js 视频系列】飞速入门

本教程共包含 6 个视频,目的是为了帮助初学者快速入门,以便阅读本站其他文章. 本教程的名称为"飞速入门",是为初学者准备的,其中包括了 D3 开发中最基础的知识.对 D3 掌握得较好的朋友不必观看本教程.本系列的具体内容如下,点击标题即可进入百度云页面观看.如果百度云网盘的在线播放中出现清晰度不足的情况,请下载后再观看. 1. 第一个D3程序 D3的简介和安装.服务器软件的安装.初学者应注意的问题.一个简单的D3程序. 源代码:src.zip 2. 制作柱形图选择集.数据绑定.柱形…

【 D3.js 高级系列】总结

高级系列的教程已经完结,特此总结. 月初的时候曾说过本月内完结高级教程,今天是最后一天,算是可以交差了.O(∩_∩)O~ 如此一来,[入门]-[进阶]-[高级]三个系列的教程算是完成了.本教程的目的在于提供一个网络的.免费的学习系列,希望大家能喜欢. 在写文章的过程中,笔者对于 D3.js 的理解也在逐步加深.因此,写在前面的文章一定比后面的文章要差,虽然部分经过了修改,但是还没有系统性修正的时间.现在三个系列的教程已经完成,接下来会花时间在修正上,尤其是入门系列,这一系列阅读量最大,但是问题也…

【 D3.js 高级系列 — 4.0 】矩阵树图

矩阵树图(Treemap),也是层级布局的扩展,根据数据将区域划分为矩形的集合.矩形的大小和颜色,都是数据的反映.许多门户网站都能见到类似图1,将照片以不同大小的矩形排列的情形,这正是矩阵树图的应用. 图1 http://www.texastribune.org/2010/10/07/treemap-reveals-campaign-ad-trends/ 现以浙江.广西.江苏三省份2013年的GDP作为数据,以GDP大小作为节点的权重将其制作成矩阵树图. 1. 数据新建一个citygdp.j…

【 D3.js 高级系列 — 1.0 】文本的换行

在 SVG 中添加文本是使用 text 元素.但是,这个元素不能够自动换行,超出的部分就显示不出来了,怎么办呢? 高级系列开篇前言从今天开始写高级系列教程.还是那句话,由于本人实力有限,不一定保证入门-进阶-高级,是一级比一级难的,大家选自己需要的阅读即可. 高级系列预计会先写一些常见的小问题(如本文)和剩下的三个布局(矩阵树图.堆栈图.捆图),然后写一些较复杂的图的制作方法,以及其交互式操作,例如:思维导图.多图联动.地图的标线标注等等. 近来嗓子像火烧一样,很不舒服,希望能快点好.o(>﹏…

数据可视化的优秀入门书籍有哪些,D3.js 学习资源汇总

习·D3.js 学习资源汇总除了D3.js自身以外,许多可视化工具包都是基于D3开发的,所以对D3的学习就显得很重要了,当然如果已经有了Javascript的经验,学起来也会不费力些. Github主页:https://github.com/mbostock/d3/wiki 包括D3简介,案例,教程和公开课,以及之前提到的API参考等. Github教程页面:https://github.com/mbostock/d3/wiki/Tutorials -·-·-·-·-·-其他:-·-·-·-·…

d3.js入门1：安装配置

D3 是当前流行的数据可视化工具,通过本文能有对 D3 有一个初步认识. 1. D3 是什么 D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档.听名字有点抽象,说简单一点,其实就是一个 JavaScript 的函数库,使用它主要是用来做数据可视化的.如果你不知道什么是 JavaScript ,请先学习 JavaScript 的相关知识. W3School 的 JavaScript 教程 JavaScript 文件的后缀名通常为 .js,故 D3…

【D3.js V5 教程】的更多相关文章