D3 力导向图 固定某个节点

最新推荐文章于 2024-07-17 14:46:11 发布
最新推荐文章于 2024-07-17 14:46:11 发布
阅读量3.4k 收藏 4
点赞数
分类专栏： 前端杂事 d3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csu_passer/article/details/89402395
版权

毕设有一个需求是根据展示药物和蛋白质之间的联系，所以药物是中心节点。很快的可以利用d3的力导向图做出以下效果：
在这里插入图片描述
不过，我们应该要固定药物所在的节点。
查一下相关的API，传送门：https://github.com/xswei/d3-force/blob/master/README.md#simulation_nodes
在这里插入图片描述

由于D3最后会修改我们传入的节点信息数据，因此我们可以直接对数据进行如下修改：

      graph.nodes[0].fx = width / 2
      graph.nodes[0].fy = height / 2

最后效果如图：
在这里插入图片描述

csu_zipple
关注
专栏目录
D3.js - 固定某些节点坐标的力导向布局
willbkimps的博客
12-31 3104
在绘制节点链接图时，有时会存在这样的需求：我们需要固定某些节点的坐标，而其它节点遵循力导向布局，坐标位置不断变换，直到得到稳定的布局结果。 效果图如下图所示，红色节点是固定了坐标的节点，灰色节点没有固定坐标，在力导向布局过程中红色节点的坐标始终不会发生变化。 在线演示：https://codepen.io/yangkui/pen/YzPGjgP 在 D3.js 中，如果想要某个节点固定在一个位...
D3.js 力导向图来处理拓扑图
weixin_33738982的博客
10-28 1029
记录一点碰到的问题和解决方案。感觉国内关于D3.js 4.0版本的相关资料还是少。 力导向图布局 D3一种布局的方式，可以将你nodes links的节点数据转换成可以绘制的坐标点数据，然后通过svg展现出来，画拓扑图中用到。 通过fixed属性来固定节点 https://bl.ocks.org/mbostock/... 上面作者的dem...
d3.js实现力导向图--添加箭头标记，边的点击事件
最新发布
m0_54479027的博客
07-17 551
d3.js实现力导向图，添加箭头标记，实现边的点击事件
d3.js力导向图节点初始位置主动配置，不配置中心力改变节点位置
m0_47383870的博客
10-23 761
如图，生成节点数据时直接修改偏移值
【D3.js数据可视化系列教程】（二十四）--力导向图
司机大傻
11-03 1万+
力导向图
d3力导向图
HaiRong_21的博客
01-25 248
d3力导向图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- <script type="text/javascript" src="../d3.js"></script>--> <script src = "https://d3js.
【D3.js - v5.x】（5）绘制力导向图 | 附完整代码
前端进阶之路 | 中大厂、外企、国企内推 | 面试培训 | 简历修改
04-27 5556
力导向图 力导向图（Force-Directed Graph），是绘图的一种算法。 在二维或三维空间里配置节点，节点之间用线连接，称为连线。各连线的长度几乎相等，且尽可能不相交。 节点和连线都被施加了力的作用，力是根据节点和连线的相对位置计算的。 根据力的作用，来计算节点和连线的运动轨迹，并不断降低它们的能量，最终达到一种能量很低的安定状态。 力导向图能表示节点之间的多对多的关系。 初始数据如下：......
d3力导向图增加节点_使用react如何搭建d3力导向图（详细教程）
weixin_29146599的博客
01-17 1064
本篇文章主要介绍了如何在react中搭建d3力导向图，现在分享给大家，也给大家做个参考。D3js力导向图搭建d3js是一个可以基于数据来操作文档的JavaScript库。可以使用HTML,CSS,SVG以及Canvas来展示数据。力导向图能够用来表示节点间多对多的关系。实现效果：连线有箭头，点击节点能改变该节点颜色和所连接的线的粗细，缩放、拖拽。版本：4.X安装和导入npm安装：npm insta...
d3力导向图增加节点_详解如何在react中搭建d3力导向图
weixin_39525007的博客
01-17 461
D3js力导向图搭建d3js是一个可以基于数据来操作文档的JavaScript库。可以使用HTML,CSS,SVG以及Canvas来展示数据。力导向图能够用来表示节点间多对多的关系。实现效果：连线有箭头，点击节点能改变该节点颜色和所连接的线的粗细，缩放、拖拽。版本：4.X安装和导入npm安装：npm install d3前端导入：import * as d3 from 'd3';一、完整代码imp...
教程：在react中搭建d3力导向图
互联网学徒
01-11 5818
D3js力导向图搭建 d3js是一个可以基于数据来操作文档的JavaScript库。可以使用HTML,CSS,SVG以及Canvas来展示数据。力导向图能够用来表示节点间多对多的关系。 实现效果：连线有箭头，点击节点能改变该节点颜色和所连接的线的粗细，缩放、拖拽。 版本：4.X 安装和导入 npm安装：npm install d3 前端导入：import * as d3 f
3D力导向图设置节点颜色
Sun_blog
04-20 214
前言 3d-force-graph是一种基于Three.js和d3.js的JavaScript库，可用于生成交互式3D力导向图，并支持自定义节点标签、颜色等属性。本篇博客将介绍如何设置3d-force-graph中的节点颜色。 使用默认颜色 在3d-force-graph中，默认情况下，所有的节点都会使用相同的颜色。如果您不需要对节点进行分类或分组，那么可以直接使用默认的节点颜色。例如： `...
relation-graph-3d-force:关系图3D力
05-16
概述 线索系列游戏中角色与组织之间的关系图 安装 npm i 构建开发/生产 npm run build:dev或npm run build:prod 演示版
D3.js 力导向图的显示优化
weixin_44324814的博客
04-30 2275
D3.js 作为一个前端，说到可视化除了听过 D3.js 的大名，常见的可视化库还有 ECharts、Chart.js，这两个库功能也很强大，但是有一个共同特点是封装层次高，留给开发者可设计和控制的部分太少。和 EChart、Chart.js 等相比，D3.js** 的相对来说自由度会高很多，得益于 D3.js **中的 SVG 画图对事件处理器的支持，D3.js 可将任意数据绑定到文档对象模型...
D3.js中Force-Directed Graph详解
wan353694124的专栏
12-10 1万+
Force-Directed Graph
D3.js实现力导向图(Dray和Zoom)
热门推荐
行走的IT
03-02 2万+
今天遇到个问题就是把json(里面nodes和edges属性)文件通过D3.js展示出来，下午终于弄出来了，写篇博客记录一下。 先展示一下效果图： 放大后是这个效果： 什么是力导向图D3.js官网：http://d3js.org/ D3.js github:https://github.com/d3/d3 力导向图（Force-Directed Graph），是绘图
D3 force(力导向图)研究之一：完美融合拖拽与缩放
甘焕的博客
05-29 1万+
本文采用的d3版本为第四版，4.9.1先看实例效果，见图1， 在对节点进行缩放后，依旧能够做到以下两点： 1. 拖拽依旧能够完美做到鼠标跟随与连接关系跟随； 2. 缩放拖拽后，节点的位置依旧正确，利于数据保存； 再看操作失败的例子，见图2。 对现象进行分析，我们可以发现： 1. 鼠标跟随无差异，拖拽操作正常； 2. 节点位置正常； 3. 连线的更新状态错误；继续诊断，我们可以得出这
D3.js 画 力导向图 带箭头 文字 圆形节点 动态添加节点
老徐的博客
05-09 1万+
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; [role=entity]{
D3.js创建力导向图(V4)附带详细的参数说明
Eiwen的博客
04-08 3416
一.代码示例 &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html lang=&amp;quot;zh-cn&amp;quot;&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;UTF-8&amp;quot;&amp;amp;gt;
d3.js学习笔记-09(布局：饼图、力导向图、弦图)
qq_40625543的博客
09-14 1991
d3.js学习笔记-09 目录d3.js学习笔记-091 饼状图(Pie)1.1 确定初始数据1.2 数据转换1.3 绘制2 力导向图(force)3 弦图(chord)References D3的12种布局：饼状图、力导向图、弦图、树状图、集群图、捆图、打包图、直方图、分区图、堆栈图、矩阵树图、层级图【不可直接使用】 布局的使用顺序：确定初始数据—>转换数据—>绘制 1 饼状图(Pie) d3.layout.pie()：创建一个饼状图布局。 pie(values[, index])：转换数据
d3力导向图隐藏节点和连线
05-17
在 d3.js 中，要隐藏节点和连线，可以通过修改它们的 CSS 属性来实现。具体来说，可以设置节点和连线的 `display` 属性为 `none`，这样它们就不会被显示出来了。 以下是一个简单的示例代码，演示如何隐藏节点和连线： ```javascript // 定义节点和连线的数据 var nodes = [{id: 1}, {id: 2}, {id: 3}]; var links = [{source: 1, target: 2}, {source: 2, target: 3}]; // 创建力导向图 var svg = d3.select("svg"); var simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links)) .force("charge", d3.forceManyBody()); // 绘制节点和连线 var link = svg.selectAll(".link") .data(links) .enter().append("line") .attr("class", "link"); var node = svg.selectAll(".node") .data(nodes) .enter().append("circle") .attr("class", "node"); // 定义隐藏节点和连线的函数 function hide() { node.style("display", "none"); link.style("display", "none"); } // 定义显示节点和连线的函数 function show() { node.style("display", null); link.style("display", null); } // 在点击按钮时隐藏节点和连线 d3.select("#hide-button").on("click", hide); // 在点击按钮时显示节点和连线 d3.select("#show-button").on("click", show); ``` 在上面的代码中，我们定义了两个函数 `hide()` 和 `show()`，分别用于隐藏和显示节点和连线。在点击按钮时，我们调用这些函数来隐藏或显示节点和连线。节点和连线的 CSS 样式可以在 CSS 文件中定义。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值