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 相关文章推荐
11款基于Javascript的文件管理器
Oct 25 Javascript
javascript document.compatMode兼容性
Feb 23 Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 20 Javascript
js构造函数、索引数组和属性的实现方式和使用
Nov 16 Javascript
新手快速学习JavaScript免费教程资源汇总
Jun 25 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
Oct 01 Javascript
JavaScript希尔排序、快速排序、归并排序算法
May 08 Javascript
浅谈javascript中的constructor
Jun 08 Javascript
Angular中实现树形结构视图实例代码
May 05 Javascript
详解基于webpack2.x的vue2.x的多页面站点
Aug 21 Javascript
详谈js中标准for循环与foreach(for in)的区别
Nov 02 Javascript
javscript 数组扁平化的实现
Feb 03 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中调用JAVA
2006/10/09 PHP
新手菜鸟必读:session与cookie的区别
2013/08/22 PHP
php多进程中的阻塞与非阻塞操作实例分析
2020/03/04 PHP
javascript 获取元素位置的快速方法 getBoundingClientRect()
2009/11/26 Javascript
jQuery创建自己的插件(自定义插件)的方法
2010/06/10 Javascript
浅谈Javascript面向对象编程
2011/11/15 Javascript
javascript中window.event事件用法详解
2012/12/11 Javascript
禁用页面部分JavaScript方法的具体实现
2013/07/31 Javascript
通过js来制作复选框的全选和不选效果
2014/05/22 Javascript
javascript实现列表切换效果
2016/05/02 Javascript
js定义类的几种方法(推荐)
2016/06/08 Javascript
纯js模仿windows系统日历
2017/02/04 Javascript
bootstrap table 多选框分页保留示例代码
2017/03/08 Javascript
Vue 2.X的状态管理vuex记录详解
2017/03/23 Javascript
微信小程序scroll-x失效的完美解决方法
2018/07/18 Javascript
小程序实现留言板
2018/11/02 Javascript
vue 的 solt 子组件过滤过程解析
2019/09/07 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
2020/05/23 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
2020/07/17 Javascript
[03:14]2014DOTA2西雅图国际邀请赛 EG战队巡礼
2014/07/07 DOTA
跟老齐学Python之赋值,简单也不简单
2014/09/24 Python
python实现简单聊天应用 python群聊和点对点均实现
2017/09/14 Python
python爬虫获取淘宝天猫商品详细参数
2020/06/23 Python
python 正确保留多位小数的实例
2018/07/16 Python
Python实现Dijkstra算法
2018/10/17 Python
python做反被爬保护的方法
2019/07/01 Python
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
PyQt5高级界面控件之QTableWidget的具体使用方法
2020/02/23 Python
python:HDF和CSV存储优劣对比分析
2020/06/08 Python
北京某科技有限公司C# .net笔试题
2014/09/27 面试题
家长给幼儿园的表扬信
2014/01/09 职场文书
大学生自我鉴定范文模板
2014/01/21 职场文书
互联网创业计划书写作技巧攻略
2014/03/23 职场文书
大学三年计划书范文
2014/04/30 职场文书
餐厅收银员岗位职责
2015/04/07 职场文书
分析并发编程之LongAdder原理
2021/06/29 Java/Android