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 相关文章推荐
jQuery数组处理代码详解(含实例演示)
Feb 03 Javascript
js优化针对IE6.0起作用(详细整理)
Dec 25 Javascript
自己实现ajax封装示例分享
Apr 01 Javascript
jQuery中:disabled选择器用法实例
Jan 04 Javascript
jQuery判断指定id的对象是否存在的方法
May 22 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
Dec 22 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
Jan 13 Javascript
原生javascript实现图片放大镜效果
Jan 18 Javascript
不得不看之JavaScript构造函数及new运算符
Aug 21 Javascript
vue 自定义全局方法,在组件里面的使用介绍
Feb 28 Javascript
react中Suspense的使用详解
Sep 01 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
Jun 10 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获取某个目录大小的代码
2008/09/10 PHP
新浪微博API开发简介之用户授权(PHP基础篇)
2011/09/25 PHP
PHP基于yii框架实现生成ICO图标
2015/11/13 PHP
PHP实现打包下载文件的方法示例
2017/10/07 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
PHP扩展Swoole实现实时异步任务队列示例
2019/04/13 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
ext form 表单提交数据的方法小结
2008/08/08 Javascript
javascript下4个跨浏览器必备的函数
2010/03/07 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
javascript验证身份证完全方法具体实现
2013/11/18 Javascript
js函数调用的方式
2014/05/06 Javascript
一个通过script自定义属性传递配置参数的方法
2014/09/15 Javascript
JavaScript实现简单的二级导航菜单实例
2015/04/15 Javascript
javascript实现2016新年版日历
2016/01/25 Javascript
重新理解JavaScript的六种继承方式
2017/03/24 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
2018/11/27 Javascript
24个ES6方法解决JS实际开发问题(小结)
2020/05/31 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
2020/08/06 Javascript
Python实现简单的可逆加密程序实例
2015/03/05 Python
在Docker上部署Python的Flask框架的教程
2015/04/08 Python
Python数据分析中Groupby用法之通过字典或Series进行分组的实例
2017/12/08 Python
python 使用matplotlib 实现从文件中读取x,y坐标的可视化方法
2019/07/04 Python
opencv设置采集视频分辨率方式
2019/12/10 Python
Python Scrapy框架:通用爬虫之CrawlSpider用法简单示例
2020/04/11 Python
Python创建文件夹与文件的快捷方法
2020/12/08 Python
css3中的calc函数浅析
2018/07/10 HTML / CSS
针对HTML5的Web Worker使用攻略
2015/07/12 HTML / CSS
英文简历中的自荐信范文
2013/12/14 职场文书
高校十八大报告感想
2014/01/27 职场文书
啤酒节策划方案
2014/05/28 职场文书
助学贷款贫困证明
2014/09/23 职场文书
教师见习报告范文
2014/11/03 职场文书
2015年班主任个人工作总结
2015/03/31 职场文书
驳回起诉民事裁定书
2015/05/19 职场文书
如何vue使用el-table遍历循环表头和表体数据
2022/04/26 Vue.js