RRie1的博客

在开发一个D3应用的时候遇到了一个`zoom`相关的问题，记录解决思路与方案

本文记录了我从发现bug，排查bug到给G6提PR，与仓库管理员沟通，最终PR被成功merge的过程。给想要参与开源，为自己喜欢的项目贡献绵薄之力的朋友提供一套完整的贡献流程参考

使用Redux-Toolkit，由“object is not extensible”引发的思考及解决方案。本文介绍了Redux-Toolkit中的状态管理机制，介绍了Immer.js即它如何被应用在了Redux的状态管理中

networkx添加节点的方式import networkx as nxG = nx.Graph()G.add_node(1)G.add_nodes_from([2,3,4,100])G.add_nodes_from([ (3,{"color":"red"}), (4,{"color":"green"}) ])print(G)add_node 和 add_nodes_from的区别add_node无论传入什么，都作为一个节点添加入图中add_nodes_fr

开发D3.js时遇到一个报错：d3.min.js:2 Uncaught TypeError: t is not a function排查后发现错出现在下列语句ticker = d3.interval(function(),50)d3.interval应该按照如下方式使用：ticker = d3.interval(e => drawDots(data,colorScale,yScale,xScale),50)...

文章目录Force Simulation 力导图实战 @ D3.js数据结构思路分析画布初始化，全局变量定义数据读取力模拟数据绑定 datajoin结点与结点名称链接tick函数编写drag 拖曳交互设计```d3.drag()```函数dragstarted 拖曳开始dragged 拖曳过程dragended 拖曳结束调用方式完整代码效果初始拖曳Force Simulation 力导图实战 @ D3.js数据结构做力导图使用到的数据为json数据，一般采用json数据来表达图结构。本次实验选用的

文章目录品牌排名动态可视化 @ D3.js任务清单思路分析画布初始化数据预处理注意将所有值转换为数值类型注意设置缺失值的缺省值为每个数据设置颜色过滤数据，仅保留当前年份的，数据切片，设置排名首次数据绑定坐标轴矩形bar品牌名label数值年份：标记当前是第几年的数据设置时间触发器ticker编写更新函数（重中之重）更新数据，重新获得前12名数据更新坐标轴重新进行数据-图元绑定第一步：绑定，获取```update() ```形态第二步：enter()第三步 update()第四步 exit()数值渐变年份

Force 力导图对数据结构要求比较严格forceSimulation() 与一般的data join不太一样，可以理解为它是d3这么一个大的可视化库中的一个小库运作机制输入一批结点Listlet nodes = [{},{},{},{}]set simulation = d3.forceSimulation(nodes)定义simulation后会发生：补全 nodes 中每个结点的数据结构index（编号），x，y（相对于画布的坐标），vx，vy（两个方向上的速度）开始模拟粒

冰锥图可视化矩形冰锥图d3.partition()官方文档用来生成邻接图：一个节点链接树图的空间填充变体。与使用连线链接节点与父节点不同，在这个布局中节点会被绘制为一个区域(可以是弧也可以是矩形)，并且其位置反应了其在层次结构中的相对位置。节点的尺寸被编码为一个可度量的维度，这个在节点-链接图中很难表示。d3.partition().size()返回一个函数，会把传入函数的数据划分成一个个区域，一般情况下使用方法为：d3.json('./data/games.json').then( data

树形数据可视化使用d3.js对层级数据进行可视化只需要考虑两步：数据预处理data-joinwidth和heightHeight：以本节点为根节点的树的高度Width：与整棵树的根节点的路径长度eg：如11和15两个节点11节点的Height：4，Width：015节点的Height：3，Width：1数据处理层级数据的数据预处理要分为两步root1 = d3.hierarchy(data) //第一步预处理，转化成层级结构// 返回的是层级结构的数据

文章目录堆叠数据数据处理前数据处理后d3.Stack 数据预处理代码 （将原始数据处理为Stack）日期数据格式化库 moment.js离散到离散的映射 d3.ordinalD3.js自带配色方案DataJoin 注：Stack和其他数据类型的data-join有一些不同代码解析 :示例代码 Demo5 - Stack堆叠数据可视化效果堆叠数据看每个柱状图，中间又分为了几种不同颜色的矩形。他们的特点是： 除了最底下的绿色矩形外，每一个矩形的y坐标都取决于它的下面一个矩形因此在做数据绑定时，还要

Interaction – 地图数据可视化JSONJavaScript Object Notation本质上（从数据格式上）是JS的对象保存后是文本文本与JS的对象是可以对等转换的这点与csv不同，js 读取 csv 的时候会转化成数组但是js 读取JSON文件时 ，是什么数据就会读出什么数据地图数据的表达 – TopoJson， GeoJsonTopoJson本质上是Json处理了GeoJson的数据冗余缺点，节约了存储空间由D3的作者 Mike Bostock

数据绑定DataJoin本质： 数据与图元进行绑定，即绑定后，每个图元就有了自己的语义。如demo2中，将数据中地区字段与图元绑定，那么图元就代表了地区Eg:每个国家的人数绑定到矩形的长度疫情感染的人数比例绑定到圆的半径目的使用Data-Join可以省区大量根据数据设置图元属性的代码量为数据动态更新提供统一接口问题//错误的绑定方式d3.selectAll('rect').data(data).attr('width', d=>xScale(d.value))但是上

2021.07.29【Note1】 SVG入门知识今天开始学习d3.js，将笔记整理为博客以记录自己的学习过程。视频资源来自于B站Up主 小魁少爷，是一位清华大学的学长，使用的好像是D3 version 5+,很适合初学者观看。目前采用的学习策略是先过一遍视频（因为时常没多长），接着再过一遍官方的教学文档，并上手做一些可视化项目所有参考资源我附在了文末SVG简介svg与 jpeg，png的区别由于jpeg，png的像素表达能力有限，因此放大一百倍后会出现失真的现象。svg操作的是矢量