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 相关文章推荐
制作特殊字的脚本
Jun 26 Javascript
js获取浏览器的可视区域尺寸的实现代码
Nov 30 Javascript
JQuery操作tr和td内容的方法实例
Mar 06 Javascript
jQuery选择器全面总结
Jan 06 Javascript
jquery制作居中遮罩层效果分享
Feb 21 Javascript
按下回车键指向下一个位置的一个函数代码
Mar 10 Javascript
JS数组的遍历方式for循环与for...in
Jul 31 Javascript
js实现透明度渐变效果的方法
Apr 10 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
May 03 Javascript
全面了解javascript中的错误处理机制
Jul 18 Javascript
node基于puppeteer模拟登录抓取页面的实现
May 09 Javascript
ES6 Object属性新的写法实例小结
Jun 25 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转成EXE文件
2006/10/09 PHP
如何使用jQuery+PHP+MySQL来实现一个在线测试项目
2015/04/26 PHP
PHP中trait使用方法详细介绍
2017/05/21 PHP
学习ExtJS TextField常用方法
2009/10/07 Javascript
jQuery 操作下拉列表框实现代码
2010/02/22 Javascript
javascript权威指南 学习笔记之javascript数据类型
2011/09/24 Javascript
js函数排序的实例代码
2013/07/01 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
js实现可控制左右方向的无缝滚动效果
2016/05/29 Javascript
JS中如何比较两个Json对象是否相等实例代码
2016/07/13 Javascript
jQuery实现手势解锁密码特效
2017/08/14 jQuery
vue基于mint-ui实现城市选择三级联动
2020/06/30 Javascript
webpack4 处理SCSS的方法示例
2018/09/03 Javascript
vue无限轮播插件代码实例
2019/05/10 Javascript
jQuery实现简易QQ聊天框
2020/02/10 jQuery
JS实现移动端可折叠导航菜单(现代都市风)
2020/07/07 Javascript
微信小程序换肤功能实现代码(思路详解)
2020/08/25 Javascript
javascript实现搜索筛选功能实例代码
2020/11/12 Javascript
windows下安装python paramiko模块的代码
2013/02/10 Python
python使用正则表达式提取网页URL的方法
2015/05/26 Python
Python中的is和==比较两个对象的两种方法
2017/09/06 Python
Python 将pdf转成图片的方法
2018/04/23 Python
python for循环输入一个矩阵的实例
2018/11/14 Python
PyQt QCombobox设置行高的方法
2019/06/20 Python
python3中类的继承以及self和super的区别详解
2019/06/26 Python
python支付宝支付示例详解
2019/08/22 Python
使用Django搭建一个基金模拟交易系统教程
2019/11/18 Python
selenium+python实现基本自动化测试的示例代码
2021/01/27 Python
用css3实现转换过渡和动画效果
2020/03/13 HTML / CSS
allbeauty美国:英国在线美容店
2019/03/11 全球购物
FC-Moto西班牙:摩托车手最大的购物场所之一
2019/04/11 全球购物
婚礼主持词开场白
2014/03/13 职场文书
《他得的红圈圈最多》教学反思
2014/04/24 职场文书
2016春节慰问信范文
2015/03/25 职场文书
暂住证证明
2015/06/19 职场文书
win11无法登录onedrive错误代码0x8004def7怎么办 ?
2022/04/05 数码科技