最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

[整理]数据可视化 JS库 D3

JS crifan 713浏览 0评论

D3.js数据可视化: Slides

D3.js

Data-Driven Documents

“D3.js 是基于数据操作文档的JavaScript库,它可以帮助你使用HTML,SVG和CSS生动地展现数据。D3不需要你使用某个特定的框架,它的重点在于对主流浏览器的兼容,同时结合了强大的可视化组件,以数据驱动的方式去操作DOM。

历史

2005年,Jeff推Prefuse,JavaApplet

2007年,Jeff推Flare,ActionScript

2009年,Jeff说服Mike一起推Protovis,Javascript

2011年,Mike,Vadim,Jeff推D3,Javascript

作者

Mike Bostock(@mbostock)

关键技术

SVG

Javascript

HTML

CSS

Ajax

Canvas

Geo

API

行为(Behaviors):可重用的交互行为

核心(Core):包括选择器,过渡,数据处理,本地化,颜色等

地理(Geography) :球面坐标,经纬度运算

几何(Geometry) :提供绘制2D几何图形的实用工具

布局(Layouts) :推导定位元素的辅助数据

比例尺(Scales) :数据编码和视觉编码之间转换

可缩放矢量图形(SVG) :提供用于创建可伸缩矢量图形的实用工具

时间(Time) :解析或格式化时间,计算日历的时间间隔等

http://github.com/mbostock/d3

-》

https://github.com/d3/d3

d3/d3: Bring data to life with SVG, Canvas and HTML.

d3/d3-selection: Transform the DOM by selecting elements and joining to data.

d3/API.md at master · d3/d3

Releases · d3/d3

Home · d3/d3 Wiki

-》

API 中文手册 · d3/d3 Wiki

[总结]

Gallery · d3/d3 Wiki

中包含大量的效果

-》都是很炫酷的效果

-》抽空要去好好看看,看看哪些可以利用起来

甚至有个可以:

动态显示数据变化:

The Wealth & Health of Nations

其他地方,也有实例效果的:

Mike Bostock’s Blocks – bl.ocks.org

D3.js – Data-Driven Documents

->Explore D3.js – Data Visualization with D3.js

【数据可视化JS库D3:histogram实例】

自己已经参考:

https://gist.github.com/mbostock/0d20834e3d5a46138752f86b9b79727e

去下载了index.html

然后修改了:

1.把:

var x = d3.scaleLinear().domain([0, 256]).rangeRound([0, histowidth]),

改为:

var x = d3.scaleLinear().domain([0, 255]).rangeRound([0, histowidth]),

-》否则Chrome运行会报错

2.图片换成自己的:

image.src = “img/xxx.jpg”;

然后可以正常运行的:

转载请注明:在路上 » [整理]数据可视化 JS库 D3

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
56 queries in 0.096 seconds, using 18.54MB memory