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 相关文章推荐
CCPry JS类库 代码
Oct 30 Javascript
jquery中实现标签切换效果的代码
Mar 01 Javascript
一个简单的Node.js异步操作管理器分享
Apr 29 Javascript
iframe里使用JavaScript控制主页转向的方法
Apr 03 Javascript
JavaScript实现99乘法表及隔行变色实例代码
Feb 24 Javascript
基于AngularJS实现iOS8自带的计算器
Sep 12 Javascript
JavaScript实现倒计时跳转页面功能【实用】
Dec 13 Javascript
Bootstrap导航简单实现代码
Mar 06 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
Oct 15 Javascript
javascript trie前缀树的示例
Jan 29 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
vue watch深度监听对象实现数据联动效果
Aug 16 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
Dedecms常用函数解析
2008/02/01 PHP
php的ddos攻击解决方法
2015/01/08 PHP
php生成圆角图片的方法
2015/04/07 PHP
PHP session 会话处理函数
2016/06/06 PHP
JQuery异步获取返回值中文乱码的解决方法
2015/01/29 Javascript
浅谈js的解析顺序 作用域 严格模式
2017/10/23 Javascript
vue2.0 datepicker使用方法
2018/02/04 Javascript
详解如何用babel转换es6的class语法
2018/04/03 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
2018/04/10 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
2018/08/07 Javascript
Vue 实现手动刷新组件的方法
2019/02/19 Javascript
详解在React-Native中持久化redux数据
2019/05/22 Javascript
JS定义函数的几种常用方法小结
2019/05/23 Javascript
浅谈vue3中effect与computed的亲密关系
2019/10/10 Javascript
基于VUE实现判断设备是PC还是移动端
2020/07/03 Javascript
[00:57]英雄,你的补给到了!
2020/11/13 DOTA
Python回文字符串及回文数字判定功能示例
2018/03/20 Python
python如何查看微信消息撤回
2018/11/27 Python
VPS CENTOS 上配置python,mysql,nginx,uwsgi,django的方法详解
2019/07/01 Python
python通过TimedRotatingFileHandler按时间切割日志
2019/07/17 Python
django rest framework 实现用户登录认证详解
2019/07/29 Python
python 利用pywifi模块实现连接网络破解wifi密码实时监控网络
2019/09/16 Python
在Tensorflow中实现梯度下降法更新参数值
2020/01/23 Python
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
2013/01/09 HTML / CSS
通过Canvas及File API缩放并上传图片完整示例
2013/08/08 HTML / CSS
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
药学专业大学生个人的自我评价
2013/11/04 职场文书
绩效专员岗位职责
2013/12/02 职场文书
研修心得体会
2014/09/04 职场文书
2014公安机关纪律作风整顿思想汇报
2014/09/13 职场文书
幼儿园感谢信
2015/01/21 职场文书
委托书格式范文
2015/01/28 职场文书
新郎父亲婚礼致辞
2015/07/27 职场文书
公司酒会致辞
2015/07/30 职场文书
查看nginx配置文件路径和资源文件路径的方法
2021/03/31 Servers
Python实现数据的序列化操作详解
2022/07/07 Python