D3.js 弦生成器(V3版本)

弦生成器(Chord Generator) 弦生成器(Chord Generator)根据两段弧来绘制弦,共有五个访问器,分别为source().target().radius().startAngle().endAngle(),默认都返回与函数名称相同的变量.如果都使用默认的访问器,则要绘制一段弧,其数据组成应该形如: { source:{ startAngle : 0.2, endAngle : Math.PI * 0.3, radius : 100 }, target:{ star…

D3.js 线段生成器 (V3版本)

线段生成器与线段生成器相关的方法: d3.svg.line() //创建一个线段生成器. line(data) //使用线段生成器绘制data数据. line.x([x]) //设置或获取线段x坐标的访问器,即使用什么数据作为线段的x坐标. line.y([y]) //同上.设置或获取y坐标的访问器. line.interpolate([interpolate]) //设置或获取线段的插值模式,共有13种. line.tension([tension]) //设置或获取张力…

D3.js 区域生成器 (V3版本)

区域生成器(Area Generator) 区域生成器(Area Generator)用于生成一块区域,使用方法与线段生成器类似.线段生成器地址:数据访问器有x().x0().x1().y().y0().y1()六个,数量很多,但不许要全部使用.举个例子: var width = 600; //SVG绘制区域的宽度 var height = 500; //SVG绘制区域的高度 //定义画图区域svg var svg = d3.select("#body") .append(&q…

D3.js 动画过渡效果 (V3版本)

一 . 过渡的启动启动过渡效果,与以下四个方法相关: d3.transition([selection],[name]) //创建一个过渡对象.但是由于每个选择集中都有transition()方法,可用d3.select("rect").transition()的方式来创建过渡,因此一般不直接用d3.transition(). transition.delay([delay]) //设定延迟的时间.过渡会经过一定时间后才开始发生.单位是毫秒. transition.d…

D3.js 弦图的制作

这是一种用于描述节点之间联系的图表. 1. 弦图是什么弦图(Chord),主要用于表示两个节点之间的联系. 两点之间的连线,表示谁和谁具有联系: 线的粗细表示权重: 2. 数据初始数据为: var city_name = [ "北京" , "上海" , "广州" , "深圳" , "香港" ]; var population = [ [ 1000, 3045 , 4567 , 1234 , 3714 ]…

D3.js(v3)+react 制作一个带坐标与比例尺的柱形图 (V3版本)

现在用D3.js + react做一个带坐标轴和比例尺的柱形图.我已经尽力把代码全部注释上了,最后我也会把完整柱形图代码奉上.如果还有疑惑的,可以去翻看一下我之前介绍的方法,以下方法都有介绍到. 还有数据都是自己定义的假数据,大家参考一下制作方法即可. 首先定义柱形图的数据.绘图区域的宽高.和上下左右的边距: var width = 600; //SVG绘制区域的宽度 var height = 500; //SVG绘制区域的高度 //定义数据 var dataList = [50,43,120,…

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（四）形状生成器

使用JavaScript和D3.js实现数据可视化形状生成器线段生成器 var linePath = d3.line() - 使用默认的设置构造一个 line 生成器. linePath.x() - 如果指定了 x 则将 x 访问器设置为指定的函数或数值并返回当前 line 生成器.如果没有指定 x 则返回当前 x 访问器,默认为: function x(d) { return d[0]; } linePath.y() - 如果指定了 y 则将 y 访问器设置为指定的函数或数值并返回当前 l…

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

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

D3.js使用过程中的常见问题(D3版本D3V4)

目录一.学习D3我必须要学习好SVG矢量图码? 二.如何理解D3给Dom节点绑定数据时的Update.Enter和Exit模式三.D3绑定数据时用datum与data有什么不一样? 四.SVG图中用attr来设置属性和用style来设置样式时,用style来设置样式的权重会更高五.D3使用链式写法时,写完transition动画后不能链着继续写append添加元素操作六.如何给path设置缓动? 七.D3普通的缓动动画八.给节点添加title,鼠标mouseover显示普通提示文本效果…

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

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

D3.js的v5版本入门教程（第十章）

在这一章我们干点有趣的事——让我们上一章绘制的图表动起来,这样岂不是很有意思为了让图表动起来,我们还是需要以下新的知识点 .attr(xxx) .transition() .attr(xxx),transition()表示添加过渡,也就是从前一个属性过渡到后一个属性.duration(2000),表示过渡时间持续2秒.delay(500),表示延迟0.4秒后再进行过渡.ease(d3.easeElasticInOut)表示过渡方式,注意这里和v3版本的区别有了上面的基础知识后,现在我们…

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>中有三个<p>,如下 <p>dog</p> <p>cat</p> <p>pig</p> <p>rat</p> 选择第一个元素<p> 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],我们可以将数组每一项与一个<p>绑定,但是,现在就有一个问题——数据集个数和选择集个数不匹配怎么办?这样就需要理解Update.Enter.Exit 例子一:update和enter:数组[3…

Vue和d3.js(v4)力导向图force结合使用，v3版本升级v4【一】

前段时间因为参与项目涉密,所以一直没有更新博客,有些博友给我私信或者留言要部分博文的源码,因为我的电脑更换,demo的源码没有备份所以无法提供.大家可针对具体问题问我,有空我定会回复的.另外转发文章请说明出处,谢谢关注! 之前有多篇博文介绍了d3力导向图的绘制过程的一些问题,现在由于性能和UI的要求,要升级d3版本.因为v3版本现在使用的不多了,网上可找的资料不多且拓展性不好,因此花了点时间做了版本升级. 效果展示初始化布局 this.force = d3.forceSimulation(n…

D3.js(v3)+react框架基础部分之数据绑定及其工作过程与绑定顺序

数据绑定: 将数据绑定到Dom上,是D3最大的特色.d3.select和d3.selectAll返回的元素的选择集.选择集上是没有数据的. 数据绑定就是使被选择元素里“含有”数据. 相关函数有两个: selection.datum([value]) : 选择集中的每一个元素都绑定相同的数据value selection.data() : 选择集中的每一个元素分别绑定数据value的每一项.key是一个键函数,用于指定绑定数组时的对应规则. datum()的工作过程: datum()绑定数据的…

D3.js (v3)+react框架基础部分之认识选择集和如何绘制一个矢量图

首先需要下载安装d3.js : yarn add d3 然后在组建中引入 : import * as d3 from 'd3' 然后定义一个方法,在componentDidMount()这个钩子函数中调用即可. 然后如何绘制一个矢量图 : render() { return ( <div id="drawSVG" ></div> ); } 先定义一个id为drawSVG的div标签.然后写一个方法,来在这个div中绘制矢量图. oneMethod() {…

基于cytoscape.js 、 d3.js实现的关系图谱初级版本

前面的文章已经介绍了cytoscape.js . d3.js的安装及简单demo,现在展示从html页面转移到vue项目下的最初版的demo 效果图: 代码如下: <template> <div style="width: 100%;height: 100%;"> <div id="MainCy" style="width: 100%;height: 100%;"></div> <div id…

D3.js 入门学习(一)

一.安装D3.js 1.网络连接 <script src="https://d3js.org/d3.v4.min.js"></script> 2.命令行安装 cnpm || npm install d3 --save => 我采用的是cnpm install d3 --save 3.创建node 服务器 a. cnpm || npm install express --save =>前面教程已经说了express 搭建服务器了.后面…

【 D3.js 入门系列 — 11 】入门总结

D3 新专题首页一转眼,这个入门系列已经积累了二十二篇文章之多,我想作为 D3.js 这款数据可视化工具的入门来说已经足够了.相信仅仅要看完本系列.以后全然能够在辅以查询的情况下完毕大部分可视化工作. D3.js 最早的 v1.0 版本号是由 Michael Bostock 于2011年2月18日公布,其后经过多人的不断完好,眼下最新的版本号为 v3.4.11.从公布至今三年多的时间里,D3.js 在国外不断有人尝试并制作教程.成为了流行的数据可视化工具.可是眼下在国内能查询到中文资料还比較少…

d3.js 实现立体柱图

前言随着大数据时代的来临,数据可视化的重要性也越来越凸显,那么今天就基于d3.js今天给大家带来可视化基础图表柱图进阶:立体柱图关于d3.js d3.js是一个操作svg的图表库,d3封装了图表的各种算法.对d3不熟悉的朋友可以到d3.js官网学习d3.js.另外感谢司机大傻(声音像张学友一样性感的一流装逼手)和司机呆(呆萌女神)等人对d3.js进行翻译! HTML+CSS <!DOCTYPE html> <html lang="en"> <head&…

D3.js 制作中国地图 .net 公共基础类

D3.js 制作中国地图 from: http://d3.decembercafe.org/pages/map/index.html GeoJSON is a format for encoding a variety of geographic data structures. http://geojson.org/ https://msdn.microsoft.com/en-us/library/mt712806.aspx GeoJSON 是用于描述地理空间信息的数据格式.GeoJSON…

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…