• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > Node.js中用D3.js的方法示例

Node.js中用D3.js的方法示例

作者:DecemberCafe 字体:[增加 减小] 来源:互联网 时间:2017-05-11

DecemberCafe通过本文主要向大家介绍了node.js,node.js下载,node.js是什么,node.js教程,node.js安装等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

前言

D3.js 是一个基于数据操作文档JavaScript库。D3帮助你给数据带来活力通过使用HTML、SVG和CSS。D3重视Web标准为你提供现代浏览器的全部功能,而不是给你一个专有的框架。结合强大的可视化组件和数据驱动方式Dom操作。下面主要介绍了Node.js中用D3.js的方法,感兴趣的朋友一起来学习下吧。

安装模块

npm install d3 jsdom
</div>

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);
</div>

编辑好后,保存为 drawCircle.js,当然什么名字都可以。

导出SVG图

node drawCircle.js > mycircle.svg
</div>

将 drawCircle.js 输出的内容(console.log 里的内容)重定向到 mycircle.svg。

最后得到生成的SVG图:mycircle.svg

总结

以上就是关于在Node.js里用D3.js的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 详解node HTTP请求客户端 - Request
  • node.JS md5加密中文与php结果不一致的解决方法
  • Node.js中的http请求客户端示例(request client)
  • JS触摸事件、手势事件详解
  • 详解Node.js串行化流程控制
  • 利用node.js写一个爬取知乎妹纸图的小爬虫
  • 浅谈Node.js轻量级Web框架Express4.x使用指南
  • Node.js对MongoDB数据库实现模糊查询的方法
  • 深入理解node.js之path模块
  • node.js+jQuery实现用户登录注册AJAX交互

相关文章

  • 2017-05-11jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
  • 2017-05-11JavaScript实现大图轮播效果
  • 2017-05-11利用JS实现文字的聚合动画效果
  • 2017-05-11bootstrap实现的自适应页面简单应用示例
  • 2017-05-11angular仿支付宝密码框输入效果
  • 2017-05-11微信小程序scroll-view实现横向滚动和上拉加载示例
  • 2017-05-11xmlplus组件设计系列之分隔框(DividedBox)(8)
  • 2017-05-11JSONP基础知识详解
  • 2017-05-11深入理解javascript的getTime()方法
  • 2018-01-28 前端 MV*框架的意义

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • js 操作json
    • js实现定时进度条完成后切换图片
    • jQuery插件zTree实现的多选树效果示例
    • 微信小程序(三):网络请求
    • 设置iframe自适应高
    • vue实现ToDoList简单实例
    • 移动端web滚动分页的实现方法
    • 如何利用js来控制音频的播放次数
    • bootstrap组件之按钮式下拉菜单小结
    • jQuery模拟淘宝购物车功能

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有