d3
文章平均质量分 66
d3
Charonmomo
这个作者很懒,什么都没留下…
展开
-
解决双击事件触发两次单击事件
如果一个节点同时绑定了单击和双击事件, 那么双击的时候就会触发两次单击事件, 两个事件存在冲突。可以通过增加一个延迟时间来解决这个问题.let click_store = null; // 存储单击事件// 单击事件function single(){ // 清除第一次单击事件 clearTimeout(click_store) click_store = setTimeout(function () { // 单击事件的代码 // ...原创 2022-01-12 17:07:14 · 3273 阅读 · 0 评论 -
d3.js 取消zoom双击放大, 阻止默认事件
描述使用 D3.js v5版本绘制了一个力引导图, 有几个功能之间发生了冲突:单击节点展示节点信息双击节点以该节点为中心展开双击导致 svg 图放大 (zoom)问题双击节点时, 会触发这个节点的双击事件, 这个节点的单击事件, 还有整个svg的双击事件.解决方法一考虑到整个svg图会受节点双击事件影响导致放大, 是由于冒泡导致的, 所以可以取消一下 d3.js 的事件冒泡: .on("zooms", function () { d3.eve原创 2022-01-11 13:46:58 · 1528 阅读 · 0 评论 -
d3.event.active报错原因
前面在非vue项目中使用时, 我们都是采用在线引入v5版本的方式, 将之前的代码修修改改复制粘贴到vue项目里的时候, 会遇到一个问题:当绘制力引导的图的时候是成功的, 但是当我们试图拖动节点的时候, 会发现节点无法被拖动, 而且红色选中的这两行会报错, 但在之前的v5版本中, 是没有这个问题的.错误代码:报错信息:网上并没有找到相应的资料, 只发现了某国外网站针对这个问题的两个提问, 所以只能靠自己发现问题了.首先要知道这几个函数 started, dragged, ended 是用来控制节原创 2021-12-24 16:33:59 · 1089 阅读 · 0 评论 -
d3 -力引导图(四) vue项目中的使用及可能遇到的问题(v7版本)
如果采用npm方式安装d3的话, 一般默认都会安装最近的版本, 目前d3已经更新到了 v7版本.vue中安装d3:npm install d3 --save-dev或者cnpm install d3 --save-dev然后在组件中引入d3:import * as d3 from 'd3';问题一 节点拖动前面在非vue项目中使用时, 我们都是采用在线引入v5版本的方式, 将之前的代码修修改改复制粘贴到vue项目里的时候, 会遇到一个问题:当绘制力引导的图的时候是成功的, 但是当我们原创 2021-12-23 17:02:36 · 1960 阅读 · 3 评论 -
d3 - 力引导图(三) 绑定事件
d3样例库介绍.on("event",function);d3通过 on() 绑定时间, 它有两个参数:第一个参数是事件类型第二个参数是执行的内容事件类型可以参考 MDN: MDN事件类型样例节点信息: const data = { "nodes": [{ "entity_name": "林黛玉", "entity_id": "entity/2870013",原创 2021-12-22 17:57:49 · 716 阅读 · 0 评论 -
d3.schemeCategory20报错原因
原回答:(v5) D3 no longer provides the d3.schemeCategory20* categorical color schemes. These twenty-color schemes were flawed because their grouped design could falsely imply relationships in the data: a shared hue can imply that the encoded data are part of原创 2021-12-22 17:35:22 · 729 阅读 · 0 评论 -
d3 - 力引导图(二) 为节点设置多种唯一颜色方案
v3版本:var color = d3.scale.category10();...return color[i];v4/v5版本:d3.schemeCategory10d3.schemeCategory20d3.schemeCategory20bd3.schemeCategory20c注意: v5版本只有 d3.schemeCategory10 可用, 其他几个已经被 d3-scale-chromatic 取代了, 在v5版本中使用后面几个都会报错! // 颜色比例尺var co原创 2021-12-22 16:20:02 · 3097 阅读 · 0 评论 -
d3 - 建立力引导图将知识图谱可视化 (一)
本文要实现的功能与这个网页比较类似: KGBuilder知识图谱可视化使用到的插件为: d3没有采用echarts等实现的原因是: echarts比较死板, 有些需求不能实现, 而d3可以灵活的制作出想要的图表.d3的引用/安装在线方式:可以在 <head></head>中插入 <script src="https://d3js.org/d3.v5.min.js"></script>:<head> <script src="原创 2021-12-21 17:13:34 · 4838 阅读 · 0 评论