如何使用d3.js制作可视化图表

一、如何使用d3.js制作可视化图表

D3是目前最流行的JavaScript可视化图表库之一，D3的图表类型非常丰富，并且支持SVG格式，因此应用十分广泛，也有很多图表插件基于D3开发，比如MetricsGraphics.js，在D3上构建的数据图表非常强大。

允许绑定任意数据到DOM，将数据驱动转换应用到Document中。

不仅可以创建精美的HTML表格，而且可以绘制折线图、柱形图和饼图等数据图表。

支持SVG，在Web页面上渲染毫无压力。

关于D3的具体用法，可以看D3图形库API参考这篇文章。本文主要对介绍一些经典图表的实现效果及代码。

<scriptsrc=""></script>

varmargin={top:20,right:40,bottom:30,left:20},

width=960-margin.left-margin.right,

height=500-margin.top-margin.bottom,

barWidth=Math.floor(width/19)-1;

.range([barWidth/2,width-barWidth/2]);

.tickFormat(function(d){returnMath.round(d/1e6)+"M";});

//AnSVGelementwithabottom-rightorigin.

varsvg=d3.select("body").append("svg")

.attr("width",width+margin.left+margin.right)

.attr("height",height+margin.top+margin.bottom)

.attr("transform","translate("+margin.left+","+margin.top+")");

//Aslidingcontainertoholdthebarsbybirthyear.

d3.csv("population.csv",function(error,data){

//Computetheextentofthedatasetinageandyears.

varage1=d3.max(data,function(d){returnd.age;}),

year0=d3.min(data,function(d){returnd.year;}),

year1=d3.max(data,function(d){returnd.year;}),

y.domain([0,d3.max(data,function(d){returnd.people;})]);

//Produceamapfromyearandbirthyearto[male,female].

.key(function(d){returnd.year;})

.key(function(d){returnd.year-d.age;})

.rollup(function(v){returnv.map(function(d){returnd.people;});})

//Addanaxistoshowthepopulationvalues.

.attr("transform","translate("+width+",0)")

.filter(function(value){return!value;})

//Addlabeledrectsforeachbirthyear(sothatnoenterorexitisrequired).

varbirthyear=birthyears.selectAll(".birthyear")

.data(d3.range(year0-age1,year1+1,5))

.attr("transform",function(birthyear){return"translate("+x(birthyear)+",0)";});

.data(function(birthyear){returndata[year][birthyear]||[0,0];})

.attr("height",function(value){returnheight-y(value);});

.text(function(birthyear){returnbirthyear;});

//Addlabelstoshowage(separate;notanimated).

.attr("x",function(age){returnx(year-age);})

.text(function(age){returnage;});

//Allowthearrowkeystochangethedisplayedyear.

d3.select(window).on("keydown",function(){

case37:year=Math.max(year0,year-10);break;

case39:year=Math.min(year1,year+10);break;

.attr("transform","translate("+(x(year1)-x(year))+",0)");

.data(function(birthyear){returndata[year][birthyear]||[0,0];})

.attr("height",function(value){returnheight-y(value);});

二、掌握js能快速开发可视化应用吗

1、在开始使用 ThingJS之前，需要先了解JavaScript，我们假设您已经掌握JS。

2、创建项目之前需登录ThingJS账号，如果您尚未登录账号或页面出现“登录已过期，请重新登录！”的提示，为保证项目的正确保存及运行，请您在账号登录之后再创建项目。您可通过以下三种方式创建项目：

3、选择菜单区域的“文件-新建项目”选项

4、点击工具栏“新建”图标，图标如右图所示：

5、在线开发为用户提供了相应的快捷代码和官方示例，如果你正在用 ThingJS在线开发页面，可以通过以下两种方式来编辑项目:

6、点击在线开发页面网页链接菜单区域的快捷代码选项中的子项，编辑区将自动插入相应代码

7、选择在线开发官方示例中的其中任意一个示例，点击相应示例，编辑区将显示相应代码

8、后续操作详见在线开发-应用开发-在线开发

9、选择菜单区域的“文件-保存”选项

10、点击工具栏“保存”图标，图标如右图所示：

11、在线开发环境提供了以下几种方式运行项目：

12、使用快捷方式“Ctrl+R/Enter”或点击工具栏中的“运行”图标，3d容器区域将运行编辑器相应的代码。图标如右图所示：

13、选择菜单区域的“工具-设置”选型，出现的设置面板，点击开启“自动保存执行”

三、简化封装threejs,让webgl可视化不再复杂

1、现今互联网与物联网发展迅速，物联网可视化领域随之崛起，其中threejs因其强大的3D JavaScript库功能而备受瞩目。webgl中文网与threejs官方教程提供了详尽的讲解与教学资源。WebGL规范在浏览器中实现三维效果，催生了多种3D JS库，而threejs凭借其优势脱颖而出。然而，学习threejs需要一定的技术基础，而封装后的threejs库则简化了学习路径，更易于普及。接下来，我们将对比threejs与thingjs的“HelloWorld”实现方式。

2、传统threejs的“HelloWorld”代码繁多，大致分为四个步骤：引入库、创建场景、添加物体、渲染场景。相比之下，threejs的“HelloWorld”代码量远低于C++等传统编程语言，更易于理解和学习。与Java的“HelloWorld”仅需五行代码不同，threejs版本的入门门槛略高，尽管如此，它仍成为网页开发中实现3D程序的主流选择。

3、thingjs作为一个面向新手的3D可视化库，实现了更为简洁的“HelloWorld”实现方式，仅需三行代码。与threejs相比，thingjs具有以下优点：相同功能的3D应用，代码量更少，更容易理解，开发速度更快。这使得thingjs成为新手开发者进入webgl领域的理想选择。

4、尽管thingjs在某些方面优于threejs，如代码量、易用性及开发效率，但threejs在底层渲染技术、成熟度及专业应用方面仍有优势。threejs适用于需要实现复杂、精密操作的场景，而thingjs则更适合一般性的3D应用开发。

5、在使用thingjs开发webgl可视化应用时，只需遵循四个基本步骤：场景搭建、应用开发、数据对接与项目发布。这个过程相当简化，易于上手。进入webgl领域，不再局限于threejs，thingjs同样能够助您一臂之力。只需访问ThingJS官网，即可开启webgl的大门。