d3.js力导向图缩放事件 重置功能

已于 2023-02-13 17:27:14 修改
阅读量522 收藏
点赞数 1
文章标签： html css html5
于 2023-02-13 17:23:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33438449/article/details/129012307
版权

d3.js v4版本，如何修改zoom中的d3.event.transform值

使用d3绘制力导向图，初始化时由于节点太多，希望自适应屏幕大小，初始化时修改了svg-transform大小修改svg中g的缩放值
这里的svg实际上是最外层g元素

问题

由于需要重置功能，所以调用d3的zoom事件自后，点击重置按钮回到初始化时的transform。再次触发zoom事件后，当前的缩放值是从上一个缩放状态开始缩放的，是由于自定义修改svg的transform值，无法修改d3.event.transform，要想实现自定义的重置和自适应事件，应该如何兼容d3.js 的zoom事件，或者如何重置d3.event.transform值
d3,js zoom事件

陌上颜如意，君子世无双
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
d3-v4.x版本-散点图（拖拽、缩放散点元素）
dengzeyuan的博客
11-20 1573
v4.x 版本-散点图（拖拽、缩放散点元素） 代码是基于vue 2.x版本项目中，代码注释部分为关键点解释都是基于d3-v4.x版本的。 demo实现效果图如下： 一、默认状态 二、拖拽散点元素 因为加了延迟动画，所以拖动的时候会有延时的动画效果。 三、缩放散点元素； 注意：在滚轮对元素放大/缩小的时候，相应的坐标系也是会跟着放大/缩小 实现代码如下：（包含关键代码注释...
d3.js 实现svg 缩放 平移 旋转
Imba
07-03 1万+
使用d3.js的时候，可能会需要对生成svg对象进行平移，旋转，缩放等操作 可以使用矩阵变换来进行坐标系下的转化，但是矩阵运算相对复杂。d3提供了相应的svg变换接口。 包括： translate() , scale() , rotate() , skewX() , and skewY() 一、translate() 平移操作 2个参数，第一个参数是向右平移的像素，第二个是向下
d3.event.transform不能用了
张中华的博客
01-20 343
解决方案 const zoom = d3.zoom().scaleExtent(this.scaleRange).on('zoom', this.zoomFn); //初始化缩放方法 zoomFn(svg, a, b, c) { // 低版本方法 // const zoom = d3.event.transform; // r...
解决d3.event在v7版本无效影响zoom拖拽缩放问题
SHALLNY
03-02 2742
近期由于代码内关于d3版本的更新，由原来的v3 v4更新值v7.0.0，导致原有关于d3的波点图内zoom方法的拖拽缩放、tooltip提示框问题开始报错，即d3.event数据废弃了 1、设置d3图形的缩放配置时， 在d3.event.transform.x中，即提示 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'x') 此时可在zoom方法内，使用匿名函数获取当前参数current，参数内即
d3.js学习笔记vue2（3）使用zoom进行缩放和平移
热门推荐
silent_missile的博客
12-05 1万+
zoom从字面上看是缩放的意思，但是d3中的zoom除了能缩放，还能平移，因为这两个操作总是不分家的 首先，整个显示区域中并不是所有的元素都要缩放和平移的，比如坐标轴、背景，这些都是不需要缩放和平移的，所以在设定zoom元素时，需要将其排除。最好的办法是使用svg的g标签对图形元素进行分组，把需要缩放的放在一个g标签里，其他的可以放在一个g标签里，也可以分开放。 在本示例代码中svgGraph...
d3.js多重力导向图多条关系线
04-29
d3.js实现关系图，多条关系连线，关系说明居中。根据json参数自动生成关系图谱。
d3.js实现图形缩放平移
10-15
主要为大家详细介绍了d3.js实现图形缩放平移效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
利用d3.js力导布局绘制资源拓扑图实例教程
01-19
emmm 这个看起来很像女神在遛一群舔狗… 啊不，是 d3.js 力导向图！ d3.js 力导向图 d3.js 是著名的数据可视化基础工具，他提供了基本的将数据映射至网页元素的能力，同时封装了大量实用的数据操作函数与图形算法。...
d3.js 绘制心电图以及网格
03-09
d3.js 绘制心电图以及网格
D3JS 画布缩放与平移（默认：鼠标左键为平移，滚动轮滑为缩放）
最新发布
Turn_to_empty的博客
04-07 1387
D3JS 画布缩放与平移
d3.js中的zoom缩放
cxu123321的博客
09-01 1万+
d3.js中的zoom缩放 2019-10-24阅读721今日6 d3.js中的缩放(zoom)是一个很重要的概念，今天来看看zoom的常见用法： d3.js中zoom常见用法(二维码) scaleExtent 先用d3.zoom初始化一个zoom，然后用scaleExtent去设置它的缩小，放大的范围： constzoom=d3.zoom() .scaleExtent([1,40]) .on("zoom",zoomed); 上面设置的是最小为原始大小，最大可以放...
d3 如何动态改变比例尺实现缩放功能
qq_44930937的博客
05-28 872
【代码】d3 如何动态改变比例尺实现缩放功能。
【d3.js】canvas下力导向图的缩放平移和拖拽兼容
qq_41841048的博客
03-26 1988
这个周零散解决了一些的关于d3问题，算是入了门，因而写了博客，顺便也作为周报的内容，所以篇幅会比正常我平时写的周报长很多，详细到代码层面。目前除了这次代码提到的v4，也完成了v6版本对应的代码。 1 从简单做起——html单页面文件开发 目前能找到的很多学习用的demo都是cdn方式引入，直接一个单页面html文件开发，而且出问题也能很方便定位查找，再者v6版本刚出不久，对于诸多api也是有了比较大的改动，讨论度不如有教程的v4，所以为了入门，同时为了避免要下各种各样的d3 npm包，还有考虑各种变量冲突、
数据可视化 D3 力导向图鼠标右击菜单的制作及缩放(zoom)和拖拽(drag)的应用
一只菜鸡
11-06 3877
先展示一波最终效果 最终效果 这段时间再学习D3，力导向图 力导向图（Force-Directed Graph），是绘图的一种算法。在二维或三维空间里配置节点，节点之间用线连接，称为连线。各连线的长度几乎相等，且尽可能不相交。节点和连线都被施加了力的作用，力是根据节点和连线的相对位置计算的。根据力的作用，来计算节点和连线的运动轨迹，并不断降低它们的能量，最终达到一种能量很低的安定状态。 力导...
d3.js力导向图使用详解
神以灵的博客
09-12 1万+
创建一个力导向图需要三个东西： 仿真模拟系统 节点 力 当然，一般我们也会创建links来连接两个节点 仿真模拟系统中存在多个节点和多种类型的力，通过力控制节点的运动，每个节点都在多个力的作用下不断发生移动，直到系统趋于平衡。中间会发生多次tick事件，每次tick，仿真系统都会更新节点的位置，且系统的能量(alpha)也会逐渐降低，直到达到某个数值(alphaMin)，整个图表就停止运动...
D3 force(力导向图)研究之一：完美融合拖拽与缩放
甘焕的博客
05-29 1万+
本文采用的d3版本为第四版，4.9.1先看实例效果，见图1， 在对节点进行缩放后，依旧能够做到以下两点： 1. 拖拽依旧能够完美做到鼠标跟随与连接关系跟随； 2. 缩放拖拽后，节点的位置依旧正确，利于数据保存； 再看操作失败的例子，见图2。 对现象进行分析，我们可以发现： 1. 鼠标跟随无差异，拖拽操作正常； 2. 节点位置正常； 3. 连线的更新状态错误；继续诊断，我们可以得出这
d3.zoom()缩放功能
weixin_57182748的博客
08-20 1122
当我们使用 D3 设定缩放功能时，它其实同时包含了平移跟缩放两种功能，我们能使用鼠标的滚轮或手指触控的方式在画面上进行相对应的操作。使用d3.zoom（），返回值是一个zoom方法，所以需要连带使用selection.call()方法，将其绑定到dom上。// 此外可以使用上面不同的api方法调整缩放效果。// 监听缩放事件 event是拿到的dom元素。// 监听缩放事件 event是拿到的dom元素。// 设置鼠标双击生效时间。// 设置viewBox。// 取消滑轮缩放事件。//设置缩放最大比例。
解决D3.zoom()缩放和平移初始化时图形位置会跳跃的问题(v6版本)
qq_44621394的博客
08-04 1590
先奉上有问题的代码 //在页面中添加svg 支持拖拽和缩放 var svg = d3.select("#body").append("svg").attr("width", 1000).attr("height", 1000) .call(d3.zoom().scaleExtent([1, 3]).on("zoom", function redraw(event: any) { svg.attr("transform", event.transform);
d3.js 力导向图
10-31
d3.js是一个基于JavaScript的开源数据可视化库，力导向图是d3.js中最常用和受欢迎的一种图形类型。力导向图主要用于显示节点之间的关系和连接。 在力导向图中，节点代表实体，而边代表节点之间的连接关系。力导向图通过模拟物理力学系统中的引力和斥力的作用，来呈现节点之间的相互作用和排斥关系。这些力的模拟使得节点在图中具有一定的位置和布局，而不仅仅是简单的点集合。 力导向图有助于观察和理解数据中的模式、关联和结构。它可以用于各种应用领域，包括社交网络分析、友好推荐系统、文件关系可视化和组织结构展示等。力导向图可以帮助用户快速发现节点之间的关系和群组，从而更好地理解数据。 使用d3.js构建力导向图需要一些基本步骤。首先，需要明确数据的结构和节点之间的连接关系。然后，使用d3.js提供的API，通过添加节点元素、边元素和样式来创建力导向图。同时，还可以通过设置各种交互行为和动画效果，以增加用户体验。 总之，d3.js力导向图是一种直观、有效的数据可视化方式，通过视觉化节点之间的关系和连接，帮助用户更好地理解和分析数据。它的灵活性和自定义性使其成为数据可视化领域中的重要工具之一。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值