如何在 d3 力定向图中突出显示(更改颜色)所有连接(邻居)节点和链接

2024-04-17

我在这里看到了这个例子http://www.d3noob.org/2013/03/d3js-force-directed-graph-example-basic.html http://www.d3noob.org/2013/03/d3js-force-directed-graph-example-basic.html我可以在一定程度上理解它,我可以进行基本的更改,但无法具体做一件事,即突出显示(更改颜色)所有连接的节点。例如,如果我将鼠标悬停在节点 1 上或单击节点 1,它应该找到所有相邻节点并通过更改颜色突出显示链接路径。

我在看从 svg 外部的按钮单击 d3 中的节点 https://stackoverflow.com/questions/11206015/clicking-a-node-in-d3-from-a-button-outside-the-svg/11211391#11211391已经回答了,但我无法让它在这个例子中工作。

如果有人可以在这里提供帮助并修改现有代码以实现连接节点/链接的搜索,我将不胜感激。

如果这确实是一个非常基本的问题并且我在这里遗漏了一些非常明显的东西,我深表歉意。


我建议阅读拖动行为文档:https://github.com/mbostock/d3/wiki/Drag-Behavior https://github.com/mbostock/d3/wiki/Drag-Behavior。因此,更改节点颜色的基本方法是在拖动开始事件上切换类。例如,考虑以下 CSS:

.node {
  stroke: #000000;
  stroke-width: 1.5px;
}

circle.others{

 fill: #C0C0C0;    
} 

现在考虑到为了本示例,您已将节点表示为圆圈(这是在 d3 力定向图中完成的:http://bl.ocks.org/mbostock/4062045 http://bl.ocks.org/mbostock/4062045),然后您可以在 d3 脚本中注册一个 Dragstart 事件,如下所示:

function dragstart(d) { 
 d3.selectAll("circle").classed("others",true);  
 d3.select(this).classed("others", false); 

}   

同样的想法也可以应用于链接。希望有帮助!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 d3 力定向图中突出显示(更改颜色)所有连接(邻居)节点和链接 的相关文章

  • C 中链表的插入排序?

    我尝试寻找与我类似的问题 但没有找到太多帮助 我有一个此类结构的链接列表 struct PCB struct PCB next int reg1 reg2 我首先创建 10 个 PCB 结构 以这种方式链接在一起 for i 20 i lt
  • d3.js:如何在圆环图中的标签下方添加值

    我是 d3 js 的新手 到目前为止我所取得的成就是 this https jsfiddle net saras arya ypdw96v9 使用教程和视频 Now I am trying to add the dataset value
  • 在三角形内强制图表 d3.js

    我正在研究 d3 js 力图 我有一个问题 是否可以在具有某些坐标的三角形内制作力图 这是我的代码 var width 500 var height 500 margin var marginLeft 10 var marginTop 10
  • d3 单击时聚焦于节点

    我正在尝试实现一种力布局 其中单击节点将能够专注于节点周围的区域 我看过一些例子 但我收到一个错误 上面写着link bounds is not defined 我认为边界没有为力布局定义 并且适用于我从中获取聚焦功能的示例http bl
  • 我可以为我的 r 闪亮界面使用 index.html 和 ui.r 吗?

    在参照this http shiny rstudio com articles html ui html关于如何完全用 HTML 构建闪亮的应用程序 我想知道是否有任何方法可以将这种方法与传统的 ui r 方法结合使用 Reason Thi
  • d3 转换改变了哪些属性?

    我试图了解 d3 中到底发生了什么转换 例如 var bars svg selectAll null data my values enter append rect statement before transition attr x 1
  • 如何使 Java 中的自定义泛型类型链表排序?

    我正在用 java 编写自己的泛型链表 而不是使用 java 集合链表 链表的add方法由以下代码组成 public void add T item int position Node
  • R/d3heatmap/shiny - 有没有办法在 d3 工具提示中嵌入图像?

    我想在滚动单元格时在 d3 工具提示中嵌入图像 而不是默认的行 列 值数据 library shiny library d3heatmap ui lt shinyUI fluidPage titlePanel Old Faithful Ge
  • d3.js v4 中的 d3.locale(),本地化

    我正在使用 d3 js 制作图表 现在想将其更新到 v4 结果发现d3 locale 由于所有日期格式的翻译都采用不同的语言 因此不再起作用 我该如何解决这个问题 我正在挖掘论坛 但对于 v4 我并没有真正找到它 你必须使用d3 timeF
  • 通过 Fabric.js 推送 D3.js 输出以支持 IE8?

    我正在评估Fabric js http fabricjs com 作为替代拉斐尔 js http raphaeljs com 用于创建与 IE8 兼容的交互式可视化 IE8 不支持 SVG 或画布 不幸的是 IE8 支持是不可协商的 Rap
  • d3.js。带条的旋转地球仪

    我正在尝试创建带有像这样的酒吧的旋转地球仪这个例子 http data arts appspot com globe 你可以看我的例子here http jsfiddle net zeleniy jrh5xucs 一切都很顺利 直到酒吧超出
  • 尝试添加到链接列表时,Valgrind 无限循环“信号 11 被丢弃”

    我正在尝试用 C 创建一个简单的单链表 并且在 Valgrind 中运行程序时遇到无限的 Singal 11 被删除 循环 我的 h 文件 ifndef TEST H define TEST H struct fruit char name
  • 如何在 d3.scale.ordinal() 中指定域?

    var W 100 var H 200 var data v 4 v 8 v 15 v 16 v 23 v 42 var x d3 scale linear domain 0 max x range 0 W var y d3 scale o
  • XSLT 分组/合并子项(使用密钥)

    我试图了解如何使用我已经编写的代码推导出解决方案 为了简化起见 我将首先解释我想要做什么以及到目前为止我得到了什么 假设我在 XSLT 中有一个 XML 变量 其中包含几个具有相同标题属性的节点 Using Dimitre Novatche
  • 暂停和恢复过渡

    我在用setInterval 因此转换会在一定时间间隔后发生 是否可以使用 setInterval 暂停和恢复工作 任何正确方向的建议 指示都会非常有帮助 这个问题是在 D3 v3 是最新版本时发布的 5年后D3 v5有了一些新方法 比如s
  • php简单xml如何读取具有不同子节点级别的多个节点

    我有一个 xml 文件 其中包含不同的命名节点和多级子节点 每个节点之间都不同 我应该如何访问数据 需要很多嵌套的for循环吗 以下是 xml 代码示例
  • 指向C中单链表指针的指针[重复]

    这个问题在这里已经有答案了 我有一个关于 C 中的单链表的问题 我用下面所示的代码创建了一个链表 include
  • D3.js分组条形图

    I am making a bar chart using D3 js like this source statcan gc ca http www statcan gc ca pub 12 593 x 2007001 figures f
  • 如何在没有 DOM 的情况下将 javascript 作为 node.js 脚本运行?

    https github com jasondavies d3 cloud https github com jasondavies d3 cloud是一个使用 D3 库的 javascript 文字云 这是一个交互式演示 http www
  • 将任何 D3.js 图表与 DC.js 集成

    我试图弄清楚如何轻松地将任何 D3 js 图表与 DC js 库集成 以便在所有图表之间使用交叉过滤功能 我也确实理解以前曾问过这种性质的问题 添加链接以供参考 DC js 监听图表组渲染 https stackoverflow com q

随机推荐

  • WPF - MVVM - 组合框选定项

    I have ViewModel 实施的INotifyPropertyChanged 在后台和类中Category它只有一个 type 属性string 我的 ComboBox SelectedItem 绑定到类别的实例 当我更改实例的值时
  • 如何更改导航视图中的分隔符颜色?

    我正在尝试使用 NavigationView 来实现 NavigationDrawer 我通过在菜单中设置组 ID 添加了分隔符 但是我看不到分隔符 我想这是因为分隔符颜色与背景相同 所以我想改变分隔符的颜色 但我找不到办法改变它 谁能帮我
  • 如何迭代大型输入文件?

    我正在尝试访问通过输入字段上传的文件内容的迭代器 我可以通过 web sys 将 JS 文件传递 到 Wasm 中 但是我一生都无法弄清楚如何访问 Rust 中传递的文件的长度和名称之外的任何内容 我想我可以将整个文件作为 ByteArra
  • Windows npm 中的 Glob 通配符

    我试图让 npm 在脚本文件夹上构建 browserify 问题是 我在 Windows 上 执行folder js 似乎不起作用 我尝试过全局安装 glob 但每当我运行构建命令时 都会返回错误 提示 找不到模块 c www projec
  • 如何从 Web 服务响应中读取 HTTP 响应标头?

    如何从 C 中的 Web 服务响应中读取 HTTP 响应标头 在深入研究 MSDN 之后 我所需要做的就是覆盖GetWebResponse方法 然后我可以访问响应头 public class MyWSProxy HttpWebClientP
  • 执行多尺度训练(yolov2)

    我想知道多尺度训练如何YOLOv2 https arxiv org pdf 1612 08242 pdf works 论文中指出 原始YOLO使用的输入分辨率为448 448 通过添加锚框 我们将分辨率更改为416 416 然而 由于我们的
  • CodeIgniter:帮助从网页获取元标记的类/库?

    我正在使用代码点火器 我想我使用哪个 php 框架并不重要 但在我编写自己的类之前 已经编写了另一个类 该类允许用户获取任何站点的页面标题和元标记 关键字 描述 如果有的话 任何能够做到这一点的 PHP 类都很棒 谢谢大家 你应该看看这个类
  • 如何设置文本字段字符限制 SwiftUI?

    我正在使用 SwiftUi 版本 2 进行应用程序开发 我遇到了 SwiftUI 中可用文本字段的问题 我不想再使用 UITextField 了 我想限制文本字段中的字符数 我搜索了很多 找到了一些与此相关的答案 但这些答案不适用于 Swi
  • Docker:基础镜像

    我试图理解 Docker 概念 但我无法理解一件事 据我了解 镜像 即容器 可以从不同的 Linux 发行版实例化 例如 Ubuntu CentOS 等 假设我在主机上运行标准 Ubuntu 14 04 What happens if I
  • 卷曲总是返回 false

    下面的代码总是回显 false 我错过了什么吗 url https www google nl ch curl init curl setopt ch CURLOPT URL url curl setopt ch CURLOPT RETUR
  • 找不到如何使用 HttpContent

    我正在尝试使用HttpContent HttpContent myContent HttpContent Create SOME JSON 但我没有找到定义它的 DLL 首先 我尝试添加对Microsoft Http也System Net
  • Scrapy 使用带有规则的 start_requests

    我找不到任何使用 start requests 与规则的解决方案 我也没有在互联网上看到任何关于这两个的示例 我的目的很简单 我想重新定义 start request 函数以获得捕获请求期间所有异常的能力 并在请求中使用元 这是我的蜘蛛的代
  • 结果在同一个文件夹中

    我尝试执行以下命令来对文件夹内找到的数据进行分析 但是 它将它们保存在我执行该行的文件夹中 如何将结果保存在文件所在的文件夹中位于 sed n 14 71p fastqc fastqc txt awk print 1 2 awk sum 2
  • 如何在golang中$push嵌套数组?

    我尝试使用以下方法将一些数据推送到嵌套数组中 push 这是我的 json 文件 id ObjectId 57307906f051147d5317984e user firstName chetan lastName kumar age 2
  • Composer PSR-4 自动加载“找不到类”调试

    是的 另一个关于 找不到类 错误的问题 要么是我遗漏了什么 要么是我误解了 PSR 4 逻辑 我的作曲家库目录结构 扫描仪 gt src gt Test php Test php namespace MyNS class Test 作曲家
  • firebase 的 addValueEventListener() 和 addListenerForSingleValueEvent() 之间的区别

    正如标题所说 我想知道两者之间的区别addValueEventListener and addListenerForSingleValueEvent Firebase 的 addValueEventListener 继续侦听其附加的查询或数
  • 从类定义中省略“private”关键字是否会造成混淆?

    我最近删除了一个private从类定义中指定 因为它位于顶部 紧接在class关键词 class MyClass private int someVariable 我认为这是多余的 一位同事不同意这一点 称这实际上 隐藏 了private数
  • 加载linux内核的基地址

    我对内核如何加载到内存有一些疑问 检查后 proc kallsyms我能够找到内核中各种符号的地址 cat proc kallsyms head n 10 00000000 t vectors start 80008240 T asm do
  • SQL 数据类型 - 如何存储年份?

    我需要在数据库中插入年份 例如 1988 1990 等 当我使用日期或日期时间时 数据类型 它显示错误 我应该使用哪种数据类型 常规的 4 字节 INT 太大了 浪费空间 您没有说明您正在使用什么数据库 因此我无法推荐特定的数据类型 每个人
  • 如何在 d3 力定向图中突出显示(更改颜色)所有连接(邻居)节点和链接

    我在这里看到了这个例子http www d3noob org 2013 03 d3js force directed graph example basic html http www d3noob org 2013 03 d3js for