E-COM-NET
首页
在线工具
Layui镜像站
SUI文档
联系我们
推荐频道
Java
PHP
C++
C
C#
Python
Ruby
go语言
Scala
Servlet
Vue
MySQL
NoSQL
Redis
CSS
Oracle
SQL Server
DB2
HBase
Http
HTML5
Spring
Ajax
Jquery
JavaScript
Json
XML
NodeJs
mybatis
Hibernate
算法
设计模式
shell
数据结构
大数据
JS
消息中间件
正则表达式
Tomcat
SQL
Nginx
Shiro
Maven
Linux
【D3.js】
【
D3.js
数据可视化系列教程】(三十)--力导向图之带文字
(1)链接数组varlinks=[ {source:"Microsoft",target:"Amazon",type:"licensing",weight:1,color:1}, {source:"Microsoft",target:"HTC",type:"licensing",weight:3,color:4}, {source:"Samsung",target:"Apple",type:"s
zhang__tianxu
·
2013-11-06 11:00
d3
d3.js
D3JS
数据可视化
【
D3.js
数据可视化系列教程】(二十九)--折叠树
折叠 展开children和_children (1)折叠函数递归调用,有子孙的就把children(显示)给_children(不显示),便于折叠,functioncollapse(d){ if(d.children){console.log(d); d._children=d.children; d._children.forEach(collapse); d.children=null
zhang__tianxu
·
2013-11-05 18:00
d3
d3.js
D3JS
数据可视化
【
D3.js
数据可视化系列教程】(二十八)--弦图
弦图 鼠标悬停效果:(1)指定圆环和玄的数值varmatrix=[ [0,5871,8916,2868],//每组是一个部分圆环,数值是其中的玄的大小 [1951,10048,2060,6171], [8010,16145,0,8045], [1013,990,940,6907] ]; (2)初始化玄varchord=d3.layout.chord()//chord使用后可以返回两个东东:chor
zhang__tianxu
·
2013-11-04 22:00
d3
d3.js
D3JS
数据可视化
【
D3.js
数据可视化系列教程】(二十七)--莱因戈尔德-蒂尔福德树
完全就是技术与艺术的完美结合体哈!//(1)树指定径向布局大小和节点邻距vartree=d3.layout.tree() .size([360,360])//节点展开的最大角幅度,比如设置为20度就最大展开只能占满20度的扇形区域 //产生的径向布局,其中以度衡量的树广度(x),树的深度(y)半径为r(以像素为单位),例如[360,r]。 .separation(function(a,b){co
zhang__tianxu
·
2013-11-04 19:00
d3
d3.js
D3JS
数据可视化
【
D3.js
数据可视化系列教程】(二十六)--加载svg文件
这个更简单//加载svgd3.xml("http://localhost:8080/spring/D3data/Rect01.svg","image/svg+xml",//加载文件 function(xml){ document.body.appendChild(xml.documentElement);//添加DOM节点 }); Rect01.svg文件 Examplerect01-rec
zhang__tianxu
·
2013-11-04 12:00
d3
d3.js
D3JS
数据可视化
【
D3.js
数据可视化系列教程】(二十五)--加载csv文件
csv文件csv圆环(1)数组初始化varnumset=[];//varnameset=[];//(2)加载csv数据d3.csv("http://localhost:8080/spring/D3data/food.csv",function(error,data){ if(error){ console.log(error); }else{ //(3)取出其中的数字,和类别名for(vari=
zhang__tianxu
·
2013-11-04 11:00
d3
d3.js
D3JS
数据可视化
【
D3.js
数据可视化系列教程】(二十四)--力导向图
//(1)定义节点和联系对象数组vardataset={ nodes:[//节点 {name:"Adam"}, {name:"Bob"}, {name:"Carride"}, {name:"Donovan"}, {name:"Edward"}, {name:"Felicity"}, {name:"George"}, {name:"Hannah"}, {name:"Iris"}, {name:"Je
zhang__tianxu
·
2013-11-03 17:00
d3
d3.js
D3JS
【
D3.js
数据可视化系列教程】(二十三)--饼图圆环图
//(1)转化数据为适合生成饼图的对象数组varpie=d3.layout.pie(dataset); //(2)用svg的path绘制弧形的内置方法vararc=d3.svg.arc()//设置弧度的内外径,等待传入的数据生成弧度 .outerRadius(outerRadius) .innerRadius(innerRadius); //(3)颜色函数varcolor=d3.scale.ca
zhang__tianxu
·
2013-11-03 12:00
【
D3.js
数据可视化系列教程】(二十二)--交互图表之提示条
三种方案:1默认//(1)1/2追加默认格式的提示.append("title")//(1)2/2追加提示文字.text(function(d){ return"ThisValueIs"+d.value; }); 2svg.on("mouseover",function(d){ //(1)取得提示显示的位置varxPosition=parseFloat(d3.select(this).attr("
zhang__tianxu
·
2013-11-03 11:00
D3.V3.js
【
D3.js
数据可视化系列教程】(二十一)--交互图表之条形图排序切换
最后效果:单击任何条排序时,再用鼠标滑过条不会打断排序;第二次单击切换升降排序删除事件控制颜色变化。使用样式表控制 /*(1)鼠标悬停时变色*/rect:hover{ fill:red; } /*(2)过渡效果*/rect{ -moz-transiton:all0.3s; -o-transiton:all0.3s; -webkit-transition:all0.3s; transition:a
zhang__tianxu
·
2013-11-03 09:00
d3
d3.js
D3JS
数据可视化
【
D3.js
数据可视化系列教程】(二十)--交互图表之条形图排序
最后效果:单击任何一个条就能重新从左到右升序排序//(1)1/2条排序函数varsortBars=function(){ svg.selectAll("rect") .sort(function(a,b){//对数据集升序排序 returnd3.ascending(a.value,b.value);//这个地方注意是键值对所以要加上值的引用b.value }) .transition() .dur
zhang__tianxu
·
2013-11-02 23:00
d3
d3.js
D3JS
数据可视化
【
D3.js
数据可视化系列教程】(十九)--交互图表之鼠标悬停
创建条形时就加上事件,实现鼠标滑过是出现水润丝滑的过度效果。//(1)鼠标悬停时变为橘黄色.on("mouseover",function(){ d3.select(this) .attr("fill","orange"); })//(2)鼠标离开时恢复,利用之前学习的动画慢慢过渡.on("mouseout",function(d){ d3.select(this) .transition() .
zhang__tianxu
·
2013-11-02 21:00
动画
D3.V3.js
【
D3.js
数据可视化系列教程】(十八)--组合添加删除
最后效果:单击更新能实现像之前那样的更新了。但是,单击添加和删除时,只能捕获第一个p标签,不能捕获第二个。//(1)根据ID确定点击的是哪个标签varparagraphID=d3.select(this).attr("id");//(2)添加删除组合起来if(paragraphID=="add"){//(3)根据最后一个key添加一个值varlastKeyValue=dataset[dataset
zhang__tianxu
·
2013-11-02 21:00
d3
d3.js
D3JS
数据可视化
【
D3.js
数据可视化系列教程】(十七)--通过键联结数据
最后效果:点击删除会从左侧消失。数值和条是对应的,即添加一条时更新位置后对应条上的数值还在这条上。1.键值对数据集vardataset=[{key:0,value:5},{key:1,value:10},{key:2,value:13},{key:3,value:19},{key:4,value:21},{key:5,value:25},{key:6,value:22},{key:7,value:
tianxuzhang
·
2013-11-02 19:17
数据可视化
D3数据可视化系列教程
d3
d3.js
d3js
数据可视化
【
D3.js
数据可视化系列教程】(十七)--通过键联结数据
最后效果:点击删除会从左侧消失。数值和条是对应的,即添加一条时更新位置后对应条上的数值还在这条上。 (1)键值对数据集vardataset=[{key:0,value:5},{key:1,value:10},{key:2,value:13},{key:3,value:19},{key:4,value:21},{key:5,value:25},{key:6,value:22},{key:7,valu
zhang__tianxu
·
2013-11-02 19:00
d3
d3.js
D3JS
数据可视化
【
D3.js
数据可视化系列教程】(十六)--更新、过度和动画
testD3-18-update.html 单击更新 单击添加 单击删除 //(1)准备数据集 vardataset=[5,10,13,19,21,25,22,18,15,13, 11,12,15,20,18,17,16,18,23,25]; //(2)设置SVG的高宽 varw=600; varh=250; varbarPadding=1; //(3)定义序数比例尺 v
zhang__tianxu
·
2013-11-01 20:00
d3
d3.js
D3JS
数据可视化
D3.js
学习(七)
上一节中我们学会了如何旋转x轴标签以及自定义标签内容,在这一节中,我们将接触动画(transition)首先,我们要在页面上添加一个按钮,当我们点击这个按钮时,调用我们的动画。所以,我们还需要在原来的基础上添加两个东西。添加一个按钮 添加一个动画函数functionupdateData(){//再次获取数据d3.tsv("../data/data-alt.tsv",function(error,d
·
2013-10-21 11:00
js
D3.js
学习(六)
上节我们学习了如何绘制多条曲线,以及给不同的曲线指定不同的坐标系。在这节当中,我们会对坐标轴标签相关的处理进行学习。首先,我们来想一个问题,如何我们的x轴上的各个标签的距离比较近,但是标签名又比较长怎么办?像是下面这种情况该如何处理?上图中x轴上的标签是不是都重叠在一起了?非常恶心对不对?所以,我们得想个办法在不改变ticks标签直接的距离的情况下,让他们达到很好的阅读效果。让ticks标签旋转一
·
2013-10-17 17:00
js
D3.js
学习(五)
上一节我们已经学习了如何设置填充区域,其实理解了他的实现原理还是非常简单了。这一节中,我们主要学习多条曲线的绘制,以及给不同的曲线指定不同的纵坐标。 新的数据由于我们要画两条曲线,所以我们要在原来的基础上新增一组测试数据,现在我们的数据是这样的:datecloseopen1-May-1258.133.4130-Apr-1253.984.5527-Apr-1267.006.7826-Apr-1289
·
2013-10-17 11:00
js
D3.js
学习(四)
上一节我们已经学习了线条样式和格栅的绘制,在这一节中我们将要根据之前绘制的线条对图表进行填充,首先来看一下我们的目标吧在这个图表中,我们对位于线条下面的空间进行了填充,那么,如何改做到呢? 设置填充样式这里设置我们填充区域的样式,我们使用浅蓝色进行填充:.area{fill:lightsteelblue;stroke-width:0;}定义填充区域就像前面绘制线条之前一样,我们首先要对其进行定义
·
2013-10-15 23:00
js
D3.js
学习(三)
上一节中,我们已经画出了图表,并且给图表添加了坐标轴的标签和标题,在这一节中,我们将要学习几个绘制线条不同特性的几个函数,以及给图表添加格栅。ok,进入话题!如何给线条设置绘制的样式?这个其实非常简单,在我们之前定义的valueline基础上加一个.interpolate(“样式”)就行啦//定义线条varvalueline=d3.svg.line().interpolate("basis").x
·
2013-10-15 11:00
js
D3.js
学习(二)
上一节中我们已经画出了一个基本的图表,不过忘了给坐标轴添加标签了,所以在本节中我们要给坐标轴加上标签,目标效果如下给X轴添加标签很明显,标签是不是一个text内容块啊,所以我们只要在svg中添加一个text然后再给这个text定位和指定内容不就行了么?先来看如何给x轴添加标签//增加一个x轴的标签 svg.append("text") .attr("transform","translate(
·
2013-10-14 17:00
js
D3.js
学习(一)
从今天开始我将和大家一起学习
D3.js
(Data-DrivenDocuments),由于国内关于D3的学习资料少之又少,所以我觉得很有必要把自己学习过程记录下来,供同学们参考,如果文章有有哪些表达有错误的还希望同学们帮我指出来
·
2013-10-14 17:00
js
D3.JS
基于javascript的图表展示库<七>
关于D3相关博客我将继续写下去,不过接下来是以视频的方式来进行讲述。我也是一边学一边录中间可能比较啰嗦希望见谅。有些地方说的也不好大家也见谅。我只是提供个人学习的d3过程的视频,不属于教程。如果希望快速掌握d3,那么也许该视频无法提供帮助。每次视频的代码还是会继续贴到博客里。视频下载地址也会陆续贴出来。以上。
a6383277
·
2013-09-24 16:00
D3.js
学习记录
D3 .chartdiv{ background-color:#3498db; text-align:right; padding:3px; margin:1px; color:white; } //createadata vardata=[4,8,5,2,10,20]; //创建一个容器 varch
·
2013-09-23 15:00
js
【
D3.js
数据可视化系列教程】--(十五)SVG基本图形绘制
【
D3.js
系列教程】--(十五)SVG基本图形绘制1、路径 testD3-13-path.html //在body中插入一個svg varsvg=d3.select('body').
zhang__tianxu
·
2013-09-17 19:00
svg
d3
D3.V3.js
D3.V3
【
D3.js
数据可视化系列教程】--(十四)有路径的文字
【
D3.js
系列教程】--(十四)有路径的文字1、 在svg中插入一個text//在body中插入一個svgvarsvg=d3.select('body').append('svg'); //在svg中插入一個
zhang__tianxu
·
2013-09-17 18:00
d3
d3.js
D3JS
数据可视化
【
D3.js
数据可视化系列教程】--(十三)轴
【
D3.js
系列教程】--(十三)轴1、定义和创建X轴//DefineXaxis varxAxis=d3.svg.axis() .scale(xScale) .orient("bottom"); //
zhang__tianxu
·
2013-09-17 11:00
d3
d3.js
D3JS
数据可视化
【
D3.js
数据可视化系列教程】--(十二)坐标尺度
【
D3.js
系列教程】--(十二)坐标尺度1、多种类型的缩放尺度QuantitativeScalesLinearScalesIdentityScalesPowerScales可以参考https://github.com
zhang__tianxu
·
2013-09-17 10:00
d3
d3.js
D3JS
数据可视化
【
D3.js
数据可视化系列教程】--(十一)散点图
1.一般的散点绘制散点图的绘制思路:准备输入数据,用二维数组表示每个点的坐标绘制SVG,并绑定数据绘制圆元素,并用绑定的数据设置圆的属性以下就是这个思路的实现,下面我们会介绍下调整的办法。//高宽varw=500;varh=100;vardataset=[[5,20],[480,90],[250,50],[100,33],[330,95],[410,12],[475,44],[25,67],[85
tianxuzhang
·
2013-09-08 12:36
数据可视化
D3数据可视化系列教程
d3
d3.js
d3js
数据可视化
【
D3.js
数据可视化系列教程】--(十一)散点图
【
D3.js
系列教程】--(十一)散点图1、一般的散点绘制用二维数组表示每个点的坐标//Widthandheight varw=500; varh=100; vardataset=[ [5,20],[
zhang__tianxu
·
2013-09-08 12:00
d3
d3.js
D3JS
数据可视化
【
D3.js
数据可视化系列教程】--(十)更自由的条形图
1、添加一个矩形//Widthandheight varw=500; varh=100; vardataset=[5,10,13,19,21,25,22,18,15,13,11,12,15,20,18,17,16,18,23,25]; //创建SVG元素 varsvg=d3.select("body") .append("svg") .attr("width",w) .attr("heigh
zhang__tianxu
·
2013-09-08 11:00
d3
d3.js
D3JS
数据可视化
【
D3.js
数据可视化系列教程】--(九)D3的数据类型
1变量JAVASCRIPT的变量是一种类型宽松的语言。定义变量不用指定数据类型。而且还是动态可变的。varvalue=100; value=99.9999; value=false; value="helloworld!"; 2数组从0开始 varpercentages=[0.55,0.32,0.91]; varnames=["a","b","c"]; percentages[1]//返回0.32
zhang__tianxu
·
2013-09-08 10:00
d3
d3.js
D3JS
数据可视化
【
D3.js
数据可视化系列教程】--(八)使用D3绘制SVG
1创建SVG//SVG尺寸 varw=500; varh=50; varsvg=d3.select("body") .append("svg") .attr("width",w)//设置高宽 .attr("height",h); 2数据驱动的SVGvardataset=[5,10,15,20,25]; varcircles=svg.selectAll("circle") .data(datase
zhang__tianxu
·
2013-09-08 09:00
d3
d3.js
D3JS
数据可视化
【
D3.js
数据可视化系列教程】--(七)SVG初探
1简单形状SVG标签包含一些基本的构图元素,包括矩形,圆形,椭圆形,线条,文字和路径等。 SVG使用的是基于像素的坐标系统,其中浏览器的左上角是原点(0,0)。x,y的正方向分别是右和下。矩形。x和y的指定左上角的坐标,width和height指定矩形的尺寸。例如: 圆。cx和cy指定圆心的坐标,ŗ表示半径大小。例如: 椭圆。cx和cy指定圆心坐标,rx和ry分别指定横半轴纵半轴长度,例如: 线。
zhang__tianxu
·
2013-09-08 09:00
d3
d3.js
D3JS
数据可视化
【
D3.js
数据可视化系列教程】--(六)生成测试数据
1使用随机数值这节内容其实很简单,主要是传递一个思想,很多时候可以用JS生成数据来完成我们的可视化创作。d3中有大量数据操作的函数。实际上下面用原生JS生成数据的代码改成D3的方式的话会更简洁,更强大:原生JS方式:vardataset=[]; for(vari=0;i testD3-5-dataPower.html div.bar{display:inline-block;width:2
zhang__tianxu
·
2013-09-07 18:00
d3
d3.js
D3JS
数据可视化
【
D3.js
数据可视化系列教程】--(五)用层画条形图
1代码解释1.1为同类层添加样式div.bar{display:inline-block;width:20px;background-color:teal;} 1.2声明要为某类层设置属性.attr("class","bar") 1.3为每个特定的层设置属性.style("height",function(d){ return(d*5)+"px"; }); 1.4设置层之间的间隔margin-ri
zhang__tianxu
·
2013-09-07 17:00
d3
d3.js
D3JS
数据可视化
【
D3.js
数据可视化系列教程】--(四)使用数据
1.说明接上面一个例子可以显示数据值,还可以根据数据值来修改颜色值。d表示当前数据值。可以使用一个匿名函数处理这个数据。2.示例 testD3-3.html vardataset=[5,10,15,20,25];d3.select("body").selectAll("p").data(dataset).enter().append("p").text(function(d){retu
zhang__tianxu
·
2013-09-07 17:00
d3
d3.js
D3JS
数据可视化
【
D3.js
数据可视化系列教程】--(三)数据绑定
1.D3可以处理哪些类型的数据?JS的数据类型。如数字,时间,字符串,布尔值,数组,对象等都可以。D3自定义的数据类型。如集合(Set),映射(Map),嵌套(Nest),及各种颜色空间(RGB,HSL,L*a*b,HSV)对象等最常用的是数组,JSON。特殊的有CSV,GeoJSON数据等。2.如何绑定?选择元素,绑定数据,追加元素。 testD3-1.html ThisismyHT
zhang__tianxu
·
2013-09-07 16:00
d3
d3.js
D3JS
数据可视化
【
D3.js
数据可视化系列教程】--(二)最简单的开始:添加元素
将
D3.js
解压到桌面,同时在桌面创建一个index.html D3测试 d3.select("body").append("p").text("Newparagraph!")
zhang__tianxu
·
2013-09-07 15:00
d3
d3.js
D3JS
数据可视化
【
D3.js
数据可视化系列教程】--(一)简介
D3(或
D3.js
)是一个用来使用Web标准做数据可视化的JavaScript库。D3帮助我们使用SVG,Canvas和HTML技术让数据生动有趣。
tianxuzhang
·
2013-09-07 15:34
数据可视化
D3数据可视化系列教程
D3
d3.js
d3js
数据可视化
【
D3.js
数据可视化系列教程】--(一)简介
D3.js
是一种数据操作类型的javascript库(也可视其为插件);2.D3有何特点?结合HTML,SVG和CSS,D3可以图形化的,生动的展现数据。3.如何获得D3?
zhang__tianxu
·
2013-09-07 15:00
d3
d3.js
D3JS
数据可视化
javascript 基于数据文档的图形库---d3
位置:https://github.com/mbostock/d3/wiki/Gallery1 D3简介
D3.js
是一个用来操作基于数据的文档的javascript库,D3能够帮助你使用html,svg
zzz_781111
·
2013-07-10 10:00
django+d3.js
在python和
d3.js
之间传递数据值得商榷啊
d3.js
的语法虽然优雅没有svg的基础要徒手画图表的话还是很吃力的有时间好好写个django+d3的站
zjhsdtc
·
2013-07-05 16:00
D3.js
探水之旅
svgtransform坐标变换方式坐标变换的使用方式:代码: ...1、平移变换(translate)平移表达式transform="translate(x,y)",即新坐标系的原点在原坐标系的(x,y)处。坐标轴的方向不变。2、旋转变换(rotate)transform="rotate(anglecx,cy)"。angle代表旋转角度,缺省单位是“度”,瞬时针为正,逆时针为负。(cx,cy)
米奇风
·
2013-06-19 00:00
JavaScript
XHTML
css
svg
d3
d3.js
学习资源
教程(简单易懂) http://alignedleft.com/tutorials/d3/ nvd3: d3的封装 http://nvd3.org/ Interactive Data Visualization for the Web http://ofps.oreilly.com/titles/9781449339739/ an svg
alanland
·
2013-05-28 09:00
JavaScript
svg
d3.js
可视化界面设计js库
http://nvd3.org/ghpages/examples.html这个类库基于知名的
D3.js
类库。目地在于帮助你创建可重用的
d3.js
图表和图表组件而不降低
d3.js
的强大功能。
guoery
·
2013-04-27 15:00
D3.JS
基于javascript的图表展示库<六>-基本柱状图2
先贴图.....这个和上篇相比多了一点点东西。所以就简单说明一下。重要的一个函数是d3.scale.ordinal() .domain(data).rangeBands([0,480]); 这个的作用与上篇介绍的d3.scale.linear()提供类似的功能。贴代码:index.html Data hor: ================================ v
a6383277
·
2013-04-07 16:00
D3.JS
基于javascript的图表展示库<五>-基本柱状图1
柱状图可以说是基本的数据展示方式之一。本节代码在 http://download.csdn.net/detail/a6383277/5224447这里简单介绍一下。采用的代码来自http://mbostock.github.com/d3/tutorial/bar-1.html 如果不明白可以自己查看更详细说明,也可以先看官方的说明在来看注释一先介绍两个方法1. selector.attr(key,
a6383277
·
2013-04-05 22:00
D3.JS
基于javascript的图表展示库<四>----基本元素选择与Table
代码在这里 http://download.csdn.net/detail/a6383277/5205910看代码:index.html Data ABCD 00010203 04050607 08091011 12131415 tab.jsfunctionselectAllTd(){ vartds=d3.selectAll("tbodytd").style
a6383277
·
2013-03-31 14:00
上一页
15
16
17
18
19
20
21
22
下一页
按字母分类:
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
其他