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 相关文章推荐
javascript 强制刷新页面的实现代码
Dec 13 Javascript
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
Jul 11 Javascript
js函数的延迟加载实现代码
Oct 11 Javascript
浅析$.getJSON异步请求和同步请求
Jun 06 Javascript
微信小程序 简单教程实例详解
Jan 13 Javascript
微信小程序tabBar底部导航中文注解api详解
Aug 16 Javascript
微信小程序之页面拦截器的示例代码
Sep 07 Javascript
小试小程序云开发(小结)
Jun 06 Javascript
vue.js中导出Excel表格的案例分析
Jun 11 Javascript
js实现鼠标点击页面弹出自定义文字效果
Dec 24 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
Feb 24 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
Mar 23 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部分常见问题总结
2006/10/09 PHP
PHP屏蔽蜘蛛访问代码及常用搜索引擎的HTTP_USER_AGENT
2013/03/06 PHP
基于Zend的Captcha机制的应用
2013/05/02 PHP
PHP连接MSSQL2008/2005数据库(SQLSRV)配置实例
2014/10/22 PHP
php将数组转换成csv格式文件输出的方法
2015/03/14 PHP
php简单生成一组与多组随机字符串的方法
2017/05/09 PHP
起点页面传值js,有空研究学习下
2010/01/25 Javascript
使用js获取QueryString的方法小结
2010/02/28 Javascript
使用javascript获取flash加载的百分比的实现代码
2011/05/25 Javascript
JS实现div内部的文字或图片自动循环滚动代码
2013/04/19 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
2013/12/05 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
2014/08/30 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
2014/10/14 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
2015/02/13 Javascript
jQuery多条件筛选如何实现
2015/11/04 Javascript
AngularJS应用开发思维之依赖注入3
2016/08/19 Javascript
AngularJS 异步解决实现方法
2017/06/12 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
2017/06/21 Javascript
angular4自定义表单控件[(ngModel)]的实现
2018/11/23 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
2019/08/22 Javascript
Python中的os.path路径模块中的操作方法总结
2016/07/07 Python
apache部署python程序出现503错误的解决方法
2017/07/24 Python
python多线程共享变量的使用和效率方法
2019/07/16 Python
检测用户浏览器是否支持CSS3的方法
2009/08/29 HTML / CSS
Pam & Gela官网:美国性感前卫女装品牌
2018/07/19 全球购物
亚马逊新加坡官方网站:Amazon.sg
2020/03/25 全球购物
工程地质勘察专业大学生求职信
2013/10/13 职场文书
单位未婚证明范本
2014/11/25 职场文书
2014年小学美术工作总结
2014/12/20 职场文书
2015年爱国卫生月活动总结
2015/03/26 职场文书
民事答辩状格式范文
2015/05/21 职场文书
千与千寻观后感
2015/06/04 职场文书
文明和谐家庭事迹材料(2016精选版)
2016/02/29 职场文书
穷人该怎么创业?谨记以下几点
2019/07/11 职场文书
MySQL 使用SQL语句修改表名的实现
2021/04/07 MySQL
NGINX 权限控制文件预览和下载的实现原理
2022/01/18 Servers