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 相关文章推荐
apycom出品的jQuery精美菜单破解方法
Feb 18 Javascript
Dom操作之兼容技巧分享
Sep 20 Javascript
javascript时间函数基础介绍
Mar 28 Javascript
防止jQuery ajax Load使用缓存的方法小结
Feb 22 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
Jul 31 Javascript
c#程序员对TypeScript的认识过程
Jun 19 Javascript
jquery实现两个图片渐变切换效果的方法
Jun 25 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
Jun 20 Javascript
Angularjs中使用指令绑定点击事件的方法
Mar 30 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
May 10 Javascript
vue+element 模态框表格形式的可编辑表单实现
Jun 07 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
Sep 21 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 intval的测试代码发现问题
2008/07/27 PHP
php查询mysql数据库并将结果保存到数组的方法
2015/03/18 PHP
Laravel模糊查询区分大小写的实例
2019/09/29 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
JS 图片缩放效果代码
2010/06/09 Javascript
表头固定(利用jquery实现原理介绍)
2012/11/08 Javascript
js+css实现导航效果实例
2015/02/10 Javascript
JavaScript获取网页支持表单字符集的方法
2015/04/02 Javascript
js密码强度实时检测代码
2016/03/02 Javascript
JavaScript字符串常用的方法
2016/03/10 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
2016/12/31 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
2017/02/12 Javascript
jQuery插件zTree实现的多选树效果示例
2017/03/08 Javascript
微信浏览器禁止页面下拉查看网址实例详解
2017/06/28 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
2017/07/12 Javascript
vue实现侧边栏导航效果
2019/10/21 Javascript
微信小程序后端(java)开发流程的详细步骤
2019/11/13 Javascript
python实现类似ftp传输文件的网络程序示例
2014/04/08 Python
Python中使用item()方法遍历字典的例子
2014/08/26 Python
数据挖掘之Apriori算法详解和Python实现代码分享
2014/11/07 Python
Python向MySQL批量插数据的实例讲解
2018/03/31 Python
python:pandas合并csv文件的方法(图书数据集成)
2018/04/12 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
python 三元运算符使用解析
2019/09/16 Python
Centos7 下安装最新的python3.8
2019/10/28 Python
在Python中使用MySQL--PyMySQL的基本使用方法
2019/11/19 Python
python中函数返回多个结果的实例方法
2020/12/16 Python
jupyter 添加不同内核的操作
2021/02/06 Python
phpquery中文手册
2021/03/18 PHP
Boutique 1美国:阿联酋奢侈时尚零售商
2017/10/16 全球购物
什么是岗位职责
2013/11/12 职场文书
应届毕业生个人自荐信范文
2013/11/30 职场文书
在校硕士自我鉴定
2014/01/23 职场文书
优秀通讯员事迹材料
2014/01/28 职场文书
法律七进实施方案
2014/03/15 职场文书
《菜园里》教学反思
2014/04/17 职场文书