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对JSON进行模式匹配 (Part 2 - 实现)
Jul 17 Javascript
js null,undefined,字符串小结
Aug 21 Javascript
jQuery示例收集
Nov 05 Javascript
Javascript获取当前日期的农历日期代码
Oct 08 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
Mar 30 Javascript
JavaScript中数组的合并以及排序实现示例
Oct 24 Javascript
字符串反转_JavaScript
Apr 28 Javascript
javascript 广告移动特效的实现代码
Jun 25 Javascript
第一次接触神奇的Bootstrap基础排版
Jul 26 Javascript
javascript实现日期三级联动下拉框选择菜单
Dec 03 Javascript
JavaScript 判断iPhone X Series机型的方法
Jan 28 Javascript
Vue3.0的优化总结
Oct 16 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初学者们头痛的十四个问题
2007/01/15 PHP
php框架Phpbean说明
2008/01/10 PHP
php中print(),print_r(),echo()的区别详解
2014/12/01 PHP
PHP中OpenSSL加密问题整理
2017/12/14 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
基于jQuery的合并表格中相同文本的相邻单元格的代码
2011/04/06 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
2015/06/04 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
2016/03/07 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
2016/07/28 Javascript
jQuery Validate插件实现表单验证
2016/08/19 Javascript
JSONP和批量操作功能的实现方法
2016/08/21 Javascript
Angular2表单自定义验证器的实现
2016/10/19 Javascript
jquery获取下拉框中的循环值
2017/02/08 Javascript
JavaScript中in和hasOwnProperty区别详解
2017/08/04 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
2018/07/09 jQuery
微信开发之微信jssdk录音功能开发示例
2018/10/22 Javascript
vue项目中使用vue-i18n报错的解决方法
2019/01/13 Javascript
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
axios实现简单文件上传功能
2019/09/25 Javascript
浅谈layui 绑定form submit提交表单的注意事项
2019/10/25 Javascript
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
Python中利用原始套接字进行网络编程的示例
2015/05/04 Python
在Python中处理字符串之isdigit()方法的使用
2015/05/18 Python
python 调用win32pai 操作cmd的方法
2017/05/28 Python
浅析Python四种数据类型
2018/09/26 Python
美国折扣香水网站:The Perfume Spot
2020/12/12 全球购物
当当网软件测试笔试题
2015/11/24 面试题
承诺书的格式范文
2014/03/28 职场文书
安全标兵事迹材料
2014/08/17 职场文书
2014国庆节国旗下演讲稿(精选版)
2014/09/26 职场文书
2014年审计人员工作总结
2014/12/19 职场文书
讲座通知范文
2015/04/23 职场文书
一般纳税人申请报告
2015/05/18 职场文书
微信小程序scroll-view不能左右滑动问题的解决方法
2021/07/09 Javascript