D3.js
关注
分享
扫一扫
文章平均质量分 88
X01动力装甲
欢迎进群（959261248）学习交流。
展开
-
d3.js v5 数据加载
d3.js v5 数据加载d3提供了几种数据加载的方式：d3.csv()d3.json()d3.tsv()d3.xml()d3.js 数据加载在 v5 版本之后有重大的变化：D3现在使用Promises而不是异步回调来加载数据。Promises简化了异步代码的结构，尤其是在支持async和await的现代浏览器中。Changes in D3 5.0Released March 22, 2018.D3 5.0 introduces only a few non-backwards-c原创 2021-01-22 11:49:37 · 695 阅读 · 0 评论 -
d3-force-3d demo
d3-force-3d demo用d3-force-3d开发的拓扑明显感觉不对，于是又又写了一个最简单的demo来测试一下。因为是3d，所以需要一个3d的框架来测试。测试数据结构是这样，这是2d svg绘制的效果。生成的3d的样子是下面这样。当时数据没有变化的时候，每次生成的结果是一样的，结构相当稳定。下面是用three.js来绘制的3d效果。再来测试下1024个节点的效果：很快就稳定了下来，随机的数据效果还不错。核心代码：const simulation = d3d .for原创 2020-11-20 17:18:48 · 1367 阅读 · 0 评论 -
d3-force
运用原力吧，路克！https://github.com/d3/d3-force/tree/v1.2.1#simulation_nodes这个模块实现了用以模拟粒子物理运动的 velocity Verlet 数值积分器。仿真思路如下: 它假设任意单位时间步长 Δt = 1，所有的粒子的单位质量常量 m = 1。作用在每个粒子上的合力 F 相当于在单位时间 Δt 内的恒定加速度 a。并且可以简单的通过为每个粒子添加速度并计算粒子的位置来模拟仿真。在信息可视化领域，物理仿真在研究 networks 和 hi原创 2020-07-29 15:25:05 · 1784 阅读 · 0 评论 -
d3.js角度渐变动画（弧度渐变）
d3.js角度渐变动画（弧度渐变）众所周知的原因SVG、Canvas里面都没有角度渐变的API。所以如果要制作一个颜色随着弧度变化而变化的环形，还是挺麻烦的一件事。如果再加上增长减少动画那就更加麻烦了。如下图所示我们要制作的动画效果，圆环的透明度随着角度的增加而增加。角度为0的时候透明度为0，角度结束的时候透明度为1。注意透明度为1的地方不固定，它随着百分比的变化而变化。d3实现角度渐变的...原创 2020-04-02 18:00:47 · 2168 阅读 · 0 评论 -
d3.js selection.join
在d3.js新版本（V5）中增加了selection.join方法大大简化了数据的update,enter,exit。selection.join案例链接：https://observablehq.com/@d3/selection-join看下面案例const matrix = [ [11975, 5871, 8916, 2868], [ 1951, 10048, 2060, 6...原创 2020-03-16 14:26:55 · 1687 阅读 · 0 评论 -
d3-axis坐标轴
d3-axisd3-axis是d3库中重要的一个组件，它通过可视化刻度的方式来帮助人们理解更好的数据。安装 d3-axis如果你有npm，你可以直接通过npm install d3-axis的方式来安装最新的版本。你也可以去官网下载不同的版本。当然我更建议你直接安装整个d3库npm install d3，它包含了所有的常见的组件。通过下面的方式你可以使用这个组件<script sr...原创 2019-11-05 18:50:24 · 754 阅读 · 0 评论 -
svg绘制蝌蚪状飞线
svg绘制蝌蚪状飞线效果如图：飞线效果在可视化中很常见，有了它整个屏幕好像添加了一个小精灵一样充满活力。原创 2019-10-12 18:48:46 · 816 阅读 · 0 评论 -
svg的transform和css的transform的区别
svg的transform和css的transformsvg中不需要带单位px以及deg角度。而在css中需要。svg attr : transform=“translate(200, 143) rotate(-122)”style=“transform: rotate(90deg) translateY(78px); opacity: 0.3;”...原创 2019-10-11 15:22:54 · 788 阅读 · 0 评论 -
d3.js中使用foreignObject
d3.js中使用foreignObject使用svg的时候只能使用text，而且该text和html中的有差异，没有移除隐藏的属性。还好svg有个foreignObject，可以支持html的标签。下面是通过d3.js中添加一个div标签。需要注意的是'xhtml:div'，需要一个xhtml作为前缀。 const fogt = g.append('foreignObject') ...原创 2019-09-29 16:57:25 · 2519 阅读 · 5 评论 -
svg linearGradient渐变在line垂直的时候会失效
svg linearGradient渐变在line垂直的时候会失效绘制一条垂直的线，用line 还是path 在垂直的时候添加linearGradient渐变会失效。最简单的处理方式是让它倾斜一点点就可显示了。this.svg.append("g") .attr("transform", "translate(" + this.divWidth / 2 + "," + this.d...原创 2019-09-26 20:02:51 · 961 阅读 · 0 评论 -
d3.js放射线条生成器lineRadial
d3.js放射线条生成器lineRadial白色是用三角函数生成的数据。红色是随机生成的数据。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ...原创 2019-09-18 19:23:16 · 1053 阅读 · 1 评论 -
D3.js V5缓动函数
d3.js 5.X缓动函数参考地址：https://github.com/d3/d3-ease/blob/v1.0.5/README.md#_ease代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport...原创 2019-09-18 16:32:49 · 375 阅读 · 0 评论 -
d3.js transition无限循环
d3.js transition无限循环利用d3.js的 transition实现无限循环。在循环结束后添加一个回调，无限循环就回调自己就可以了。·.on('end,funame),。下面通过d3在body中添加了一个div。然后让他一直左右移动。 let di = d3.select('body') .append('div') .tex...原创 2019-09-02 19:15:03 · 3782 阅读 · 1 评论 -
d3.symbol D3.js符号生成器
d3.symbol D3.js符号生成器api版本 5.Xd3中有7个符号生成器。symbolCircle 圆形symbolCross 十字架symbolDiamond 菱形symbolSquare 正方形symbolStar 五角星symbolTriangle 三角形symbolWye Y形内置这几个形状有什么用啊，太简单了。下面我们来绘制一个五角星this.svg...原创 2019-08-16 11:03:04 · 1839 阅读 · 0 评论 -
D3.jsV5入门教程
D3.js入门笔记最近一直在开发3D可视化组件，偶尔也开发2D的组件。但是2D我也是用3D的方式开发的，感觉有点浪费。所以打算入手一下D3，毕竟D3还是挺有市场的灵活性非常大，很适合二次开发。d3官网：https://d3js.org/1 安装D3通过npm的方式安装：npm install d3 --save，然后引入d3 import * as D3 from "./D3"...原创 2019-07-31 11:11:39 · 5578 阅读 · 0 评论