d3可视化
文章平均质量分 51
Brave_liberty
这个作者很懒,什么都没留下…
展开
-
基于diagonal生成器的cluster布局
1.diagonal生成器diagonal生成器是路径生成器的一种,需要的数据形式是var data = [ {A:{x:100,y:100}, B:{x:200,y:200}}, {A:{x:200,y:200}, B:{x:300,y:100}},原创 2017-10-07 11:12:41 · 373 阅读 · 0 评论 -
# d3栈布局
栈布局很简单,就像栈的形式一样,将数据叠加起来显示。 <script type="text/javascript"> var w = 500; var h = 300; //Original data //数据的格式必须整理成这样 var dataset = [ [ ...原创 2018-03-20 21:43:32 · 211 阅读 · 0 评论 -
通过div来实现条形图
在d3中,我们一通过svg中rect来绘制条形图,其实也可以通过div简单的色块填充来实现。 总体思路: 添加div元素 添加类(类中设置好css样式) 或者style()直接设置css样式 <style type="text/css"> div.bar { width: 75px; height: 100...原创 2018-03-20 21:44:21 · 654 阅读 · 0 评论 -
D3弧生成器
<style type="text/css"> body { background-color: #045e93; } .tooltip { position: absolute; width: 130px; height: auto; background-color: steelblue; f...原创 2018-03-30 16:39:28 · 1286 阅读 · 0 评论 -
D3之layout.force()
<script type="text/javascript"> var dataset={ nodes:[ { name: "Adam" }, { name: "Bob" }, { name: "Carrie" }, ...原创 2018-03-30 16:45:02 · 1558 阅读 · 0 评论 -
D3柱状图练习
<style type="text/css"> rect:hover { fill: orange; } rect { transition: all 0.2s; -moz-transition:all 0.3s; -webkit- transition:all 0.3s; -m...原创 2018-03-30 21:50:17 · 593 阅读 · 0 评论 -
D3_柱状图(2)
<script type="text/javascript"> var dataset=[]; for (var i=0;i<30;i++){ var num=Math.round(Math.random()*30); dataset.push(num); } // var dataset=[5,15,25,35,45,12,12,23,65,43,78,33,...原创 2018-03-30 21:53:57 · 302 阅读 · 0 评论 -
D3__散点图
<script type="text/javascript"> dataset=[]; for (i=0;i<50;i++){ x=Math.round(Math.random()*1000); y=Math.round(Math.random()*1000); dataset.push([x,y]); } var formator=d3.format("...原创 2018-03-30 21:58:49 · 1031 阅读 · 0 评论 -
D3指arc生成器__圆形上分布柱状图
var width=800,height=600; // var data = [ // {startAngle:0,endAngle:2*Math.PI/3}, // {startAngle:2*Math.PI/3,endAngle:4*Math.PI/3}, // {startAngle:4*Ma...原创 2018-03-31 10:29:38 · 2091 阅读 · 0 评论 -
D3__chord layout
var matrix=new Array(15); for (var i=0;i<15;i++){ matrix[i] = new Array(15) for (var j=0;j<15;j++){ matrix[i][j]=parseInt(Math.random()*8); } } /*定义一个弦布局*/ console.log(matrix) ...原创 2018-03-31 10:32:55 · 437 阅读 · 0 评论 -
《D3--数据可视化实战》读书总结
d3理解 标签(空格分隔): 未分类 1.绑定数据 [x] 定义:通过循环的方式将数据绑定在dom元素上,每个数据对应一个元素,所以这个数据的值就能来设定dom元素的width,height,x,y坐标等,这就表现了数据驱动的思想,同时也是d3的精华所在。 [x] 我们绑定的数据通过匿名函数function(d,i)来调用,数据的值就能设置dom元素的属性。 所有的标签都可以进...原创 2018-03-20 21:42:10 · 1493 阅读 · 0 评论 -
可视化交互行为
交互式入门:鼠标,键盘,触屏事件;d3.event行为:退拽,缩放1.鼠标点击事件要领: //鼠标常用事件: click,mouseover,mouseout,mousemove,mousedown,mouseup,dbclick //鼠标事件都是在on(“click”,function(){})的形式中调用的var rect = svg.selectAll("rect")原创 2017-10-26 16:27:04 · 1296 阅读 · 0 评论 -
patition布局
1.partition布局首先就是先定义一个partition布局还有布局的相关访问函数var partition=d3.layout.partition() .sort(null) .size([width,height]) .value(fun原创 2017-10-08 11:03:47 · 361 阅读 · 0 评论 -
histogram布局用法
1histogram布局histogram布局,频率分布直方图,字面意思很明了,表明了一个范围内分布的频率,其中每个柱型表明了这个范围内个数。//随机生成正态分布数据 var random=d3.random.normal(170,10);//均值和方差var dataset=[] for (var i=0;i<100;i++){ dataset.push(random()); } cons原创 2017-10-08 11:30:02 · 2161 阅读 · 0 评论 -
stack布局
stack布局的用法还是跟其他一样,我们要知道用stack(dataset)生成的数据形式是什么,然后用生成的数据去生成我们需要的svg图形, var dataset = [ { name: "PC" , sales: [ { year:2005, profit: 3000 }, { year:2006, profit: 1300 },原创 2017-10-08 22:25:14 · 338 阅读 · 0 评论 -
# arc生成器与chord生成器在chord布局中的使用详解
首先我们先来解释下arc生成器与chord生成器,其实所谓的生成器其实都是路径生成器的一种,在svg中有个标签元素,<path d=”“> </path>,我们发现有个d属性需要我们填写,我们当然可以自己填写,比如M0,0L1,1L2,2这些,但是这只是线段,如果弧,弦这种呢?根本就没法写,况且就算由点连成的线段写起来也很麻烦,与是d3给我们写了一个这样一系列函数,用来专门生成我们想要的图形路径字符原创 2017-10-01 11:53:34 · 452 阅读 · 0 评论 -
d3生成器--line,area,diagonal
1.线生成器—直线line生成器生成的是直线,两点确定一条直线,所以line需要指定x,y的坐标,在文档中成为访问器,也叫访问函数,同时还可以指定插值模式,就是两点之间采用什么样的策略确定插值点,有step,basis,linear等。总之就是在定义生成器的时候会在后边定义它生成它所需要的一些属性。// 线生成器 // var lineData=[[1,50],[40,10],[100,90],[1原创 2017-10-01 15:39:45 · 4181 阅读 · 0 评论 -
基于force布局的map
基于布局的使用对数据的结构形式要求比较高,所以我们在学习的时候要注意每个布局所需要的结构,在进行与其他模块整合的时候就要注意数据的提取转换,比如说这这篇,1.构造node数据,初始数据是每个省的周边geo,我们通过path.centroid()—–》拿到中心结点坐标,这就是force布局中的node,同时也要将周边路径本身保存进去,因为我们在基于force绘制node时,要绘制出周边路径,不像cir翻译 2017-10-10 10:51:26 · 358 阅读 · 0 评论 -
在map上标记point
先说下最近学习的一些经验, 1越来越觉得我们在学习每个东西的时候应该打破砂锅问到底,为什么要这样做?这样做有什么用?在网页上呈现的是什么?将每句代码的作用都搞清楚,这样才能在组合的时候我们能用的很放心。 2.还要一个就是数据格式的问题,在学习别人代码的时候要搞清楚别人加载的文件数据格式是什么,其实在加载完数据后,作者操作的本质就是不断提取加载的数据,组合成自己所需要的数据格式,在地图中这一点尤为原创 2017-10-10 16:03:18 · 549 阅读 · 1 评论 -
文章标题
在学一张图的时候要弄清作者的写作思路,哪几个元素是成套出现的,谁在前谁在后,将思路轨迹理清楚,就像这篇文章 1.projection—>path(projection)—->svg添加path并绑定数据,生成地图 2.marker中添加arrow的path,生成箭头—–》marker中添加circle,定义起点—->svg中添加line标签,并绑定circle与arrow marker的数据形翻译 2017-10-10 21:16:56 · 206 阅读 · 0 评论 -
地理路径生成器d3.deo.path()
这篇文章是《数据可视化实战》中的作者例子,我只不过是想重温下地理路径生成器的使用思路。 地理路径的格式有两种,geojson,topojson,topojson是d3作者mike自创的一种格式,并没有成为一种标准,这个例子是书中例子,格式是geojson形式的。1.数据格式 数组中每个字典都代表了一个州的边界数据,2.我们先看下代码 <script type="text/javas原创 2017-10-05 21:50:50 · 1769 阅读 · 0 评论