Node.js中用D3.js的方法示例


Posted in Javascript onJanuary 16, 2017

前言

D3.js 是一个基于数据操作文档JavaScript库。D3帮助你给数据带来活力通过使用HTML、SVG和CSS。D3重视Web标准为你提供现代浏览器的全部功能,而不是给你一个专有的框架。结合强大的可视化组件和数据驱动方式Dom操作。下面主要介绍了Node.js中用D3.js的方法,感兴趣的朋友一起来学习下吧。

安装模块

npm install d3 jsdom

D3.js是操作DOM来作图的,要在Node.js里使用需要像jsdom这样的模块。

绘制一个圆

var d3 = require('d3');
var jsdom = require('jsdom');

var document = jsdom.jsdom();

var svg = d3.select(document.body).append('svg')
 .attr('xmlns', 'http://www.w3.org/2000/svg')
 .attr('width', 500)
 .attr('height', 500);


svg.append("circle")
 .attr("cx",250)
 .attr("cy",250)
 .attr("r",250)
 .attr("fill","Red");

console.log(document.body.innerHTML);

编辑好后,保存为 drawCircle.js,当然什么名字都可以。

导出SVG图

node drawCircle.js > mycircle.svg

将 drawCircle.js 输出的内容(console.log 里的内容)重定向到 mycircle.svg。

最后得到生成的SVG图:mycircle.svg

总结

以上就是关于在Node.js里用D3.js的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
让回调函数 showResponse 也带上参数的代码
Aug 13 Javascript
获取input标签的所有属性的方法
Jun 28 Javascript
JS关闭窗口时产生的事件及用法示例
Aug 20 Javascript
javascript 四十条常用技巧大全
Sep 09 Javascript
js实现不提示直接关闭网页窗口
Mar 30 Javascript
微信小程序 数据绑定及运算的简单实例
Sep 20 Javascript
使用angularjs.foreach时return的问题解决
Sep 30 Javascript
JS实现根据数组对象的某一属性排序操作示例
Jan 14 Javascript
微信小程序使用蓝牙小插件
Sep 23 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
Apr 11 Javascript
原生JavaScript实现随机点名表
Jan 14 Javascript
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
JavaScript实现的select点菜功能示例
Jan 16 #Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
Jan 16 #Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
Jan 16 #Javascript
js实现弹窗暗层效果
Jan 16 #Javascript
js实现简单的计算器功能
Jan 16 #Javascript
Javascript中document.referrer隐藏来源的方法
Jan 16 #Javascript
基于jQuery实现的打字机效果
Jan 16 #Javascript
You might like
JAVA/JSP学习系列之二
2006/10/09 PHP
centos 5.6 升级php到5.3的方法
2011/05/14 PHP
让ThinkPHP支持大小写url地址访问的方法
2014/10/31 PHP
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
php文件上传后端处理小技巧
2016/05/22 PHP
巧用局部变量提升javascript性能
2014/02/24 Javascript
js实现简易的单数字随机抽奖(0-9)
2020/03/19 Javascript
基于JavaScript实现简单的随机抽奖小程序
2016/01/05 Javascript
JavaScript的ExtJS框架中表格的编写教程
2016/05/21 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
2016/12/28 Javascript
将鼠标焦点定位到文本框最后(代码分享)
2017/01/11 Javascript
微信小程序使用request网络请求操作实例
2017/12/15 Javascript
详解关于微信setData回调函数中的坑
2019/02/18 Javascript
微信小程序 弹窗输入组件的实现解析
2019/08/12 Javascript
JavaScript代理模式原理与用法实例详解
2020/03/10 Javascript
详解React路由传参方法汇总记录
2020/11/29 Javascript
[00:23]DOTA2群星共贺开放测试 25日无码时代来袭
2013/09/23 DOTA
Python matplotlib绘图可视化知识点整理(小结)
2018/03/16 Python
PyGame贪吃蛇的实现代码示例
2018/11/21 Python
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
使用PyTorch将文件夹下的图片分为训练集和验证集实例
2020/01/08 Python
python实现tail -f 功能
2020/01/17 Python
python 贪心算法的实现
2020/09/18 Python
python和C++共享内存传输图像的示例
2020/10/27 Python
Python利用matplotlib绘制折线图的新手教程
2020/11/05 Python
python+openCV对视频进行截取的实现
2020/11/27 Python
python matplotlib工具栏源码探析二之添加、删除内置工具项的案例
2021/02/25 Python
使用CSS3制作一个简单的进度条(demo)
2017/05/23 HTML / CSS
Sephora丝芙兰菲律宾官方网站:购买化妆品和护肤品
2017/04/05 全球购物
总经理岗位职责描述
2014/02/08 职场文书
党的群众路线教育实践活动学习心得体会
2014/03/03 职场文书
2014年社区国庆节活动方案
2014/09/16 职场文书
信息技术教研组工作总结
2015/08/13 职场文书
人力资源部工作计划
2019/05/14 职场文书
详细谈谈MYSQL中的COLLATE是什么
2021/06/11 MySQL
k8s部署redis cluster集群的实现
2021/06/24 Redis