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 相关文章推荐
jQuery 数据缓存模块进化史详细介绍
Nov 19 Javascript
JS应用正则表达式转换大小写示例
Sep 18 Javascript
JsRender for index循环索引用法详解
Oct 31 Javascript
jQuery实现设置、移除文本框默认值功能
Jan 13 Javascript
深入php面向对象、模式与实践
Feb 16 Javascript
原生js编写基于面向对象的分页组件
Dec 05 Javascript
原生js简单实现放大镜特效
May 16 Javascript
详解Vue组件之间的数据通信实例
Jun 17 Javascript
MUI实现上拉加载和下拉刷新效果
Jun 30 Javascript
js中apply和Math.max()函数的问题及区别介绍
Mar 27 Javascript
了解在JavaScript中将值转换为字符串的5种方法
Jun 06 Javascript
vue-i18n实现中英文切换的方法
Jul 06 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
ThinkPHP采用模块和操作分析
2011/04/18 PHP
解析php框架codeigniter中如何使用框架的session
2013/06/24 PHP
php判断输入是否是纯数字,英文,汉字的方法
2015/03/05 PHP
PHP中preg_match正则匹配中的/u、/i、/s含义
2015/04/17 PHP
PHP中单例模式与工厂模式详解
2017/02/17 PHP
javascript编程起步(第三课)
2007/02/27 Javascript
js 浏览器事件介绍
2012/03/30 Javascript
JS运动框架之分享侧边栏动画实例
2015/03/03 Javascript
比较常见的javascript中定义函数的区别
2015/11/09 Javascript
jQuery实现文字自动横移
2017/01/08 Javascript
canvas实现环形进度条效果
2017/03/23 Javascript
vue中如何创建多个ueditor实例教程
2017/11/14 Javascript
微信小程序动态增加按钮组件
2018/09/14 Javascript
详解Vue用cmd创建项目
2019/02/12 Javascript
Layer+Echarts构建弹出层折线图的方法
2019/09/25 Javascript
jQuery实现回到顶部效果
2020/10/19 jQuery
[01:01]青春无憾,一战成名——DOTA2全国高校联赛开启
2018/02/25 DOTA
使用python统计文件行数示例分享
2014/02/21 Python
Python实现简单的文件传输与MySQL备份的脚本分享
2016/01/03 Python
python机器学习库常用汇总
2017/11/15 Python
Python编程实现使用线性回归预测数据
2017/12/07 Python
Request的中断和ErrorHandler实例解析
2018/02/12 Python
linux下python使用sendmail发送邮件
2018/05/22 Python
Flask框架配置与调试操作示例
2018/07/23 Python
python数据结构之线性表的顺序存储结构
2018/09/28 Python
Pytorch的mean和std调查实例
2020/01/02 Python
windows下Pycharm安装opencv的多种方法
2020/03/05 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
Python3爬虫关于识别点触点选验证码的实例讲解
2020/07/30 Python
日本PLST在线商店:日本时尚杂志刊载的人气服装
2016/12/10 全球购物
高中数学教学反思
2014/01/30 职场文书
《赵州桥》教学反思
2014/02/17 职场文书
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
质量在我心中演讲稿
2014/09/02 职场文书
镇副书记专题民主生活会对照检查材料思想汇报
2014/10/02 职场文书
2015年国庆晚会主持词
2015/07/01 职场文书