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 相关文章推荐
html数组字符串拼接的最快方法
Sep 16 Javascript
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
May 18 Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
May 14 Javascript
让新消息在网页标题闪烁提示的jQuery代码
Nov 04 Javascript
Javascript 按位与赋值运算符 (&=)使用介绍
Feb 04 Javascript
jQuery获取DOM节点实例分析(2种方式)
Dec 15 Javascript
微信小程序 聊天室简单实现
Apr 19 Javascript
200行代码实现blockchain 区块链实例详解
Mar 14 Javascript
JavaScript根据json生成html表格的示例代码
Oct 24 Javascript
Angular Material Icon使用详解
Nov 07 Javascript
VUE中使用HTTP库Axios方法详解
Feb 05 Javascript
使用Cargo工具高效创建Rust项目
Aug 14 Javascript
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
php下正则来匹配dede模板标签的代码
2010/08/21 PHP
PHP乱码问题,UTF-8乱码常见问题小结
2012/04/09 PHP
PHP内存缓存Memcached类实例
2014/12/08 PHP
浅析php静态方法与非静态方法的用法区别
2016/05/17 PHP
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
2007/04/20 Javascript
Egret引擎开发指南之运行项目
2014/09/03 Javascript
微信小程序 定位到当前城市实现实例代码
2017/02/23 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
2017/05/22 Javascript
用原生JS实现简单的多选框功能
2017/06/12 Javascript
学习JS中的DOM节点以及操作
2018/04/30 Javascript
探索node之事件循环的实现
2020/10/30 Javascript
vue 数据操作相关总结
2020/12/17 Vue.js
python实现的生成随机迷宫算法核心代码分享(含游戏完整代码)
2014/07/11 Python
Python日志模块logging简介
2015/04/13 Python
Python实现堆排序的方法详解
2016/05/03 Python
python django 访问静态文件出现404或500错误
2017/01/20 Python
Python查找第n个子串的技巧分享
2018/06/27 Python
对Python使用mfcc的两种方式详解
2019/01/09 Python
使用Django连接Mysql数据库步骤
2019/01/15 Python
对python列表里的字典元素去重方法详解
2019/01/21 Python
详解用python写网络爬虫-爬取新浪微博评论
2019/05/10 Python
Python利用sqlacodegen自动生成ORM实体类示例
2019/06/04 Python
pycharm 批量修改变量名称的方法
2019/08/01 Python
Python字符编码转码之GBK,UTF8互转
2020/02/09 Python
详解html2canvas截图不能截取圆角图片的解决方案
2018/01/30 HTML / CSS
世界上最大的曲棍球商店:Pro Hockey Life
2017/10/30 全球购物
药品业务员岗位职责
2014/04/17 职场文书
金融管理专业求职信
2014/07/10 职场文书
四风个人对照检查材料思想汇报(办公室通用版)
2014/10/07 职场文书
2015年学校工作总结范文
2015/04/20 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
国博复兴之路观后感
2015/06/02 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书
用Python写一个简易版弹球游戏
2021/04/13 Python
小程序实现悬浮按钮的全过程记录
2021/10/16 HTML / CSS
vue选项卡切换的实现案例
2022/04/11 Vue.js