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 01 Javascript
关于使用runtimeStyle属性问题讨论文章
Mar 08 Javascript
js获取 type=radio 值的方法
May 09 Javascript
js数组与字符串的相互转换方法
Jul 09 Javascript
jquery果冻抖动效果实现方法
Jan 15 Javascript
分享9点个人认为比较重要的javascript 编程技巧
Apr 27 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
Sep 21 Javascript
JS正则表达式验证密码格式的集中情况总结
Feb 23 Javascript
浅谈Angular6的服务和依赖注入
Jun 27 Javascript
微信小程序实现默认第一个选中变色效果
Jul 17 Javascript
nuxt.js中间件实现拦截权限判断的方法
Nov 21 Javascript
ES6 迭代器与可迭代对象的实现
Feb 11 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
PHP5中MVC结构学习
2006/10/09 PHP
解析func_num_args与func_get_args函数的使用
2013/06/24 PHP
php+js iframe实现上传头像界面无跳转
2014/04/29 PHP
PHP中echo和print的区别
2014/08/28 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
PHP实现UTF8二进制及明文字符串的转化功能示例
2017/11/20 PHP
PHP实现读取文件夹及批量重命名文件操作示例
2019/04/15 PHP
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
2011/06/27 Javascript
jquery1.83 之前所有与异步列队相关的模块详细介绍
2012/11/13 Javascript
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
获取中文字符串的实际长度代码
2014/06/05 Javascript
JQuery Tips相关(1)----关于$.Ready()
2014/08/14 Javascript
跟我学习JScript的Bug与内存管理
2015/11/18 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
2020/10/26 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
2017/03/21 Javascript
JS简单实现数组去重的方法示例
2017/03/27 Javascript
详解vue.js的事件处理器v-on:click
2017/06/27 Javascript
Bootstrap Paginator+PageHelper实现分页效果
2018/12/29 Javascript
[01:04:01]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第一场
2014/05/24 DOTA
[32:39]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第一场 11.04
2020/11/04 DOTA
浅谈numpy数组的几种排序方式
2017/12/15 Python
Python批量发送post请求的实现代码
2018/05/05 Python
python print输出延时,让其立刻输出的方法
2019/01/07 Python
Python基础学习之基本数据结构详解【数字、字符串、列表、元组、集合、字典】
2019/06/18 Python
Django {{ MEDIA_URL }}无法显示图片的解决方式
2020/04/07 Python
Python的collections模块真的很好用
2021/03/01 Python
德国汉莎航空中国官网: Lufthansa中国
2017/03/30 全球购物
技校个人求职信范文
2014/01/25 职场文书
学生会离职感言
2014/02/11 职场文书
军校大学生个人的自我评价
2014/02/17 职场文书
基层干部个人对照检查及整改措施
2014/10/28 职场文书
2016暑期社会实践心得体会范文
2016/01/14 职场文书
深入浅析python3 依赖倒置原则(示例代码)
2021/07/09 Python
Python爬虫 简单介绍一下Xpath及使用
2022/04/26 Python