一、d3的下载绑定

到官网下载：http://d3js.org

最好采用本地引用：<script src=“d3.v3.min.js” charset=“utf-8”></script>

当然也给出网络引用的方式：<script src=“http://d3js.org/d3.v3.min.js” charset=“utf-8”></script>

上述版本号可以根据要求自行更改

一个简单的例子：

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var width  = 400;  //SVG绘制区域的宽度
var height = 400;  //SVG绘制区域的高度
var svg = d3.select("body")          //选择<body>.append("svg")    //在<body>中添加<svg>.attr("width", width)    //设定<svg>的宽度属性.attr(“height”, height);//设定<svg>的高度属性
svg.append("circle").attr("cx","50px").attr("cy","50px").attr("r","50px").attr("fill","blue");
</script>

二、d3的最大特色

d3的最大特色就是绑定到容器DOM中，在选择数据集的时候，d3采用select和selectAll的方式分别可以返回第一个元素或者返回所有元素。

例如：

d3.select(“body”)
d3.select(“#important”)
d3.selectAll(“.content”)

D3的添加、插入删除代码如下：

selection.append(name)
selection.insert(name[,before])
Selection.remove()

但是上述的操作（select），并没有绑定数据，只是选了数据集。

绑定相同的元素时我们采用：

selection.datum([value])

分别绑定不同元素的时候我们采用：

selection.data([values[,key])

给出一个绑定数据的例子，比如有一个dataset=[3,6,9]。代码如下：

<script>var dataset=[3,6,9];var p=d3.select("body").selectAll("p");var update=p.data(dataset);console.log(update);
</script>

如果这段代码采用p.datum(dataset)，会取得不一样的效果：

根据数组长度和元素数量的关系，我们采用不同的绑定数据方式：

Update：数组长度=元素数量

enter：数组长度>元素数量（）

Exit：数组长度<元素数量（多余数据退出）

Data()默认是索引序号绑定的。

三、JS与D3的比较

如果采用JAVASCRIPT选择DOM元素：例如：

<body><p>北京</p><p>朝阳区</p><script>var para=document.getElementsByTagName("p");for (var i=0;i<para.length;i++){var para1=para.item(i);para1.innerHTML="Hello World";}</script></body>

但是如果采用D3选择DOM元素，例如：

<script src="d3.v3.js" charset="utf-8"></script>
<script>      var para=d3.select("body").selectAll("p").text("你好");para.style("color","red");para.style("font-size","60px");</script>

四、D3绘制直方图

1、添加直方图

var rect=svg.selectAll("rect").data(dataset).enter().append("rect").attr("fill","DarkKhaki").attr("x",function(d,i){return i*rectStep;}).attr("y",function(d,i){return height-((d-mindata)*(scalemax-scalemin)/(maxdata-mindata)+100);}).attr("width",rectWidth).attr("height",function(d){return ((d-mindata)*(scalemax-scalemin)/(maxdata-mindata)+80);});

2、添加文字

var text=svg.selectAll(".textvalue").data(dataset).enter().append("text").attr("class",".textvalue").attr("fill","white").attr("font-size","12px").attr("text-anchor","middle").attr("x",function(d,i){return i*rectStep;}).attr("y",function(d,i){return height-((d-mindata)*(scalemax-scalemin)/(maxdata-mindata)+100);}).attr("dx",rectWidth/2).attr("dy","1em").text(function(d){return d});

3、添加更新DRAW（）

function draw(){var updateRect=svg.selectAll("rect").data(dataset);updateRect.attr("fill","DarkKhaki").attr("x",function(d,i){return i*rectStep;}).attr("y",function(d,i){return height-((d-mindata)*(scalemax-scalemin)/(maxdata-mindata)+100);}).attr("width",rectWidth).attr("height",function(d){return ((d-mindata)*(scalemax-scalemin)/(maxdata-mindata)+80);});

4、添加按钮


function mysort(){dataset.sort(d3.ascending);draw();}function myadd(){dataset.push(Math.floor(Math.random()*4000));draw();
}<button type="button" onclick="mysort()">sort</button>
<button type="button" onclick="myadd()">append</button>

其余的操作读者可以自行练习

未完待续……

数据可视化 d3操作汇总（一）：d3以及直方图绘制简介相关推荐

数据可视化之MATPLOTLIB实战：PLT.POLAR()函数绘制极线图（转载）
转自:数据可视化之MATPLOTLIB实战:PLT.POLAR()函数绘制极线图代码 import matplotlib as mpl import matplotlib.pyplot as pl ...
数据可视化 d3操作汇总（二）：圆弧、饼图、环图、玫瑰图绘制
一.圆环绘制圆环绘制必须要先有一个弧生成器,必须提供的参数有起始角度和中止角度,例如: var dataset = { startAngle: 0 , endAngle: Math.PI * 0.7 ...
python与excel做数据可视化-python操作Excel、读取CVS与数据可视化
1. python操作Excel python操作Excel有多种module可以实现(xlrd.xlwt.xlutils.openpyxl.xlsxwriter),本文使用xlsxwriter这个m ...
交互设计、信息图、信息可视化、数据可视化技术资源汇总——设计师的领域，设计师说了算
本文整理了设计师常逛的网站,这些资料信息网站包括交互设计.信息图.信息可视化,在线制图.数据可视化,本文大致的内容包括: <灵感--可以参看如下网站来寻找灵感网站汇总>. <信息图工 ...
graphpad做折线图坐标轴数字_pandas做数据可视化具体操作，快来看看吧
常见的数据可视化库有: matplotlib 是最常见的2维库,可以算作可视化的必备技能库,由于matplotlib是比较底层的库,api很多,代码学起来不太容易. seaborn 是建构于matpl ...
Django学习手册 - ORM 数据创建/表操作汇总
ORM 查询的数据类型: QuerySet与惰性机制(可以看作是一个列表) 所谓惰性机制:表名.objects.all()或者.filter()等都只是返回了一个QuerySet(查询结果集对象),它 ...
数据可视化平台网址汇总
百度地图开放平台MapV: https://mapv.baidu.com/v1/ 百度数据可视化:http://echarts.baidu.com/ 蚂蚁数据可视化AntV:https://antv. ...
R数据可视化第三弹---ggplot2和REmap包绘制地图
绘制地图 1.ggplot2提供了一些工具,让使用maps包绘制的地图与其他ggplot2图形的结合变得十分方便.关于中国地图的绘制可以参考:http://cos.name/2009/07/drawi ...
Matlab数据可视化方法与模板(2)——二维图像绘制
当下越来越多研究人员选择运用Matlab对数据进行建模处理,并进行相应的数据可视化操作.本系列对Matlab绘图与可视化方法进行了总结,并给出了相应的模板供各位参考使用,希望对各位的研究与工作有所帮助
《JavaScript数据可视化编程》——1.4 用离散图表绘制x/y值
本节书摘来自异步社区<JavaScript数据可视化编程>一书中的第1章第1.4节作者 [美]Stephen A.Thomas 译者翟东方 , 张超 , 刘畅责编陈冀康更多章节内容可 ...

数据可视化 d3操作汇总（一）：d3以及直方图绘制简介

一、d3的下载绑定

二、d3的最大特色

三、JS与D3的比较

四、D3绘制直方图

1、添加直方图

2、添加文字

3、添加更新DRAW（）

4、添加按钮

数据可视化 d3操作汇总（一）：d3以及直方图绘制简介相关推荐

最新文章

热门文章

数据可视化 d3操作汇总（一）：d3以及直方图绘制简介

一、d3的下载 绑定

二、d3的最大特色

三、JS与D3的比较

四、D3绘制直方图

1、添加直方图

2、添加文字

3、添加更新DRAW（）

4、添加按钮

数据可视化 d3操作汇总（一）：d3以及直方图绘制简介相关推荐

最新文章

热门文章

一、d3的下载绑定