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 相关文章推荐
IE6,IE7下js动态加载图片不显示错误
Jul 17 Javascript
Javascript下判断是否为闰年的Datetime包
Oct 26 Javascript
读jQuery之一(对象的组成)
Jun 11 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
Dec 14 Javascript
通过jquery 获取URL参数并进行转码
Aug 18 Javascript
javascript中String对象的slice()方法分析
Dec 20 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
总结javascript中的六种迭代器
Aug 16 Javascript
Angularjs 创建可复用组件实例代码
Oct 09 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
Jan 11 Javascript
js实现单张图片平移切换效果
Oct 11 Javascript
vue-cli3+typescript初体验小结
Feb 28 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处理文件的小例子(解压缩,删除目录)
2013/02/03 PHP
php遍历文件夹和文件列表示例分享
2014/03/11 PHP
PHP利用header跳转失效的解决方法
2014/10/24 PHP
详解js异步文件加载器
2016/01/24 PHP
PHP的Yii框架中YiiBase入口类的扩展写法示例
2016/03/17 PHP
Yii使用smsto短信接口的函数demo示例
2016/07/13 PHP
PHP如何通过date() 函数格式化显示时间
2020/11/13 PHP
jquery 插件开发 extjs中的extend用法小结
2013/01/04 Javascript
JavaScript实现QueryString获取GET参数的方法
2013/07/02 Javascript
JsRender for object语法简介
2014/10/31 Javascript
Jquery 实现弹出层插件
2015/01/28 Javascript
jQuery1.9+中删除了live以后的替代方法
2016/06/17 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
2016/12/02 Javascript
jquery实现输入框实时输入触发事件代码
2016/12/21 Javascript
Node.js数据库操作之查询MySQL数据库(二)
2017/03/04 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
2017/06/08 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
2017/07/31 Javascript
vue-cli3 karma单元测试的实现
2019/01/18 Javascript
JavaScript实现五子棋游戏的方法详解
2019/07/08 Javascript
layui-table对返回的数据进行转变显示的实例
2019/09/04 Javascript
vue路由守卫及路由守卫无限循环问题详析
2019/09/05 Javascript
分享一个可以生成各种进制格式IP的小工具实例代码
2017/07/28 Python
python使用TensorFlow进行图像处理的方法
2018/02/28 Python
python保存网页图片到本地的方法
2018/07/24 Python
用Python抢火车票的简单小程序实现解析
2019/08/14 Python
Python如何生成xml文件
2020/06/04 Python
基于Python实现体育彩票选号器功能代码实例
2020/09/16 Python
python实现马丁策略的实例详解
2021/01/15 Python
html5 canvas实现圆形时钟代码分享
2013/12/25 HTML / CSS
AmazeUI的下载配置与Helloworld的实现
2020/08/19 HTML / CSS
Vero Moda西班牙官方购物网站:丹麦BESTSELLER旗下知名女装品牌
2018/04/27 全球购物
中职生自我鉴定范文
2013/10/03 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
Mac M1安装mnmp (Mac+Nginx+MySQL+PHP) 开发环境
2021/03/29 PHP
MySQL5.7并行复制原理及实现
2021/06/03 MySQL
使用Redis做预定库存缓存功能
2022/04/02 Redis