广告
返回顶部
首页 > 资讯 > 前端开发 > node.js >Node.js中用D3.js的方法示例
  • 638
分享到

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

示例中用方法 2022-06-04 17:06:12 638人浏览 八月长安
摘要

前言 D3.js 是一个基于数据操作文档javascript库。D3帮助你给数据带来活力通过使用html、SVG和CSS。D3重视WEB标准为你提供现代浏览器的全部功能,而不是给你一个专有的框架。结合强大的

前言

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的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

--结束END--

本文标题: Node.js中用D3.js的方法示例

本文链接: https://www.lsjlt.com/news/12821.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Node.js中用D3.js的方法示例
    前言 D3.js 是一个基于数据操作文档JavaScript库。D3帮助你给数据带来活力通过使用HTML、SVG和CSS。D3重视Web标准为你提供现代浏览器的全部功能,而不是给你一个专有的框架。结合强大的...
    99+
    2022-06-04
    示例 中用 方法
  • Node.js中流(stream)的使用方法示例
    前言 本文主要给大家介绍了关于Node.js 流(stream)的使用方法,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍: 流是基于事件的API,用于管理和处理数据,而且有不错的效率.借助事件...
    99+
    2022-06-04
    中流 示例 使用方法
  • JS库中Three.js的用法示例
    这篇文章给大家分享的是有关JS库中Three.js的用法示例的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。准备工作在写代码之前,你首先要去下最新的three.js框架包,在你的页...
    99+
    2022-10-19
  • js中闭包的用法示例
    小编给大家分享一下js中闭包的用法示例,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!闭包,其实是一种语言特性,它是指的是程序设计...
    99+
    2022-10-19
  • js中数组的用法示例
    这篇文章给大家分享的是有关js中数组的用法示例的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。数组1 reduce方法同时实现map和filter假设现在有一个数列,你希望更新它的...
    99+
    2022-10-19
  • C#调用js库的方法示例代码
    目录前言安装ClearScript引入js文件创建V8ScriptEngine对象通过js引擎加载js文件C#调用js方法实现经纬度坐标纠偏C#调用js方法判断经纬度点位是否在多边形...
    99+
    2023-01-17
    C#调用js库 C# js库 C#调用js
  • js中FCC算法的示例分析
    这篇文章主要介绍js中FCC算法的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!把一个字符串中的字符重新排列生成新的字符串,返回新生成的字符串里没有连续重复字符的字符串个数....
    99+
    2022-10-19
  • JS中switch的四种写法示例
    目录引言switch一般写法switch简单写法IIFE 封装封成策略引言 JavaScript 的 switch 有四样写法,你知道么?不管你知道不知道,反正我是不知道。 我所知道...
    99+
    2022-11-13
  • node.js实现回调的方法示例
    本文实例讲述了node.js实现回调的方法。分享给大家供大家参考,具体如下: 向回调函数传递额外的参数 在调用函数中,使用匿名函数中实现需传递的参数,再次匿名函数内调用回调函数。 var events ...
    99+
    2022-06-04
    示例 回调 方法
  • Node.js复制文件的方法示例
    本文实例讲述了Node.js复制文件的方法。分享给大家供大家参考,具体如下: 本人开发过程中,经常遇到,要去拷贝模板到当前文件夹,经常要去托文件,为了省事,解决这个问题,写了一个node复制文件。 //...
    99+
    2022-06-04
    示例 文件 方法
  • js给图片打马赛克的方法示例
    本文主要主要介绍了js给图片打马赛克的方法示例,分享给大家,具体如下: 效果演示 Canvas简介 这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘...
    99+
    2022-11-12
  • js indexOf 的正确用法示例详解
    目录js indexOf 的正确用法补充:js中indexOf()的使用示例1:查找字符串中某一字符从头开始第一次出现的索引示例2:查找字符串中某一字符从指定位置开始第一次出现的索引...
    99+
    2023-02-05
    js indexOf 用法 js indexOf 使用
  • JS 中Proxy代理和 Reflect反射方法示例详解
    目录正文1.属性描述符2.Reflect3.Proxy3.1 创建空代理3.2 定义捕获器3.3 捕获器不变式3.4 可撤销代理4.代理捕获器与反射方法4.1 get()4.2 se...
    99+
    2022-11-13
    JS Proxy代理Reflect反射 JS 代理反射
  • JS前端中WebSocket的使用方法举例
    先来一个常用例子 // WebSocket构造函数,创建WebSocket对象 let ws = new WebSocket('ws://localhost:8888') // 连...
    99+
    2023-03-02
    websocket 使用 websocket教程 websocket能做什么
  • JS数组中filter方法的使用实例
    目录1、定义2、语法3、参数说明4、用法5、注意事项6、使用实例附:多条件单数据筛选总结1、定义   filter()创建一个新的数组,新数组中的元素是通过检查指...
    99+
    2022-11-13
  • js中indexOf()的简单使用示例
    目录语法:定义用法及实例补充知识:不区分大小写的 javascript indexOf总结语法: String.IndexOf(Char, [startIndex], [count]...
    99+
    2023-01-12
    js indexof的用法 js数组indexof用法 indexof的用法
  • javascript预加载图片、css、js的方法示例介绍
    预加载的好处可以让网页更快的呈现给用户,缺点就是可能会增加无用的请求(但图片、css、js这些静态文件可以被缓存),如果用户访问的页面里面的css、js、图片被预加载了,用户打开页面...
    99+
    2022-11-15
    javascript 预加载图片
  • vue引用外部JS并调用JS文件中的方法实例
    目录VUE项目中引入JS文件的几种方法1.在index.html页面使用script标签引入2.在main.js中使用window.moduleName 使用3.手动添加export...
    99+
    2023-02-27
    vue引用外部js文件 vuecli引入外部js
  • JS中二分查找算法的示例分析
    这篇文章将为大家详细讲解有关JS中二分查找算法的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。二分法查找,也称折半查找,是一种在有序数组中查找特定元素的搜索算法。...
    99+
    2022-10-19
  • Vue中使用Teleport的方法示例
    目录正文Teleport 在 Vue 中的使用禁用 Teleport 标签正文 通常,当我们在 Vue 中创建组件时,它们出现在我们期望的 DOM 结构中。但是,有时我们并不希望如此...
    99+
    2022-11-13
    Vue使用Teleport Vue Teleport
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作