如何在 D3.js 力定向图中设置焦点节点?

2023-11-29

我有一个数据集,它定义了在力定向图中使用的多个节点。看起来像...

  var nodeSet = [
    {id: "N1", name: "Node 1", type: "Type 1", hlink: "http://www.if4it.com"},
    {id: "N2", name: "Node 2", type: "Type 3", hlink: "http://www.if4it.com/glossary.html"},
    {id: "N3", name: "Node 3", type: "Type 4", hlink: "http://www.if4it.com/resources.html"},
    {id: "N4", name: "Node 4", type: "Type 5", hlink: "http://www.if4it.com/taxonomy.html"},
    {id: "N5", name: "Node 5", type: "Type 1", hlink: "http://www.if4it.com/disciplines.html"}
  ];

我如何具体告诉 d3.js 库中的force.layout使用id =“N1”的“Node 1”作为主根或焦点节点?


如果您只需要一个根节点,您可以在对象中拥有 root 属性并将其设置为 true,而不是单独处理该节点。您还可以将此根设置为居中。我们是这样做的(d3 + Prototype - 当时 - 现在切换到 d3+jQuery+underscore):

getCenter: function() {
    var center = {
        x : this.width / 2,
        y : this.height / 2
    };
    return center;
}

//later do something like this in your init method:
var first = {
                id : id,
                name : name,
                x : this.getCenter().x,
                y : this.getCenter().y,
                root : true,
                //other properties
            };

//later in your redraw() or other methods you might employ...
//try to find the root node later in the code using something like:
var rootNode = this.nodes.detect(function(node) {
    return node.root;
});

//do something to the root node after you have detected it...
if (rootNode) {
    rootNode.x = rootNode.px = this.getCenter().x;
    rootNode.y = rootNode.py = this.getCenter().y;
    //some other stuff...
}

我们就是这样做的。然而,我不清楚你的例子中的链接是什么......有点困惑。 您会注意到,对于强制导向布局或更复杂的动画,您几乎总是需要使用 D3+其他东西(Prototype、jQuery、下划线)来执行简单方法,例如检测或包含或其他类似的 Ruby 风格方法。

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

如何在 D3.js 力定向图中设置焦点节点? 的相关文章

  • React-native:将场景绑定到导航栏

    我正在整理这个提问 回答应用程序 并遇到了这个障碍 我想从导航栏触发场景中的功能 与登录应用程序类似 我在导航栏中有一个用于提交答案的按钮 RightButton route navigator index navState if rout
  • 如何更改传单中功能集的样式?

    我正在看等值区域的例子 https leafletjs com examples choropleth https leafletjs com examples choropleth 这是他们使用的数据源 type Feature prop
  • 访问sendBeacon发送的数据

    文档表明sendBeacon通过发送其数据HTTP POST request 但在 PHP 中 POST变量似乎是一个空数组 这是我的 JavaScript 代码 navigator sendBeacon beacon log php My
  • 动态速度计 javascript 或 jquery 插件

    我希望有动态ajax插件在页面上显示速度计 一个想法是我设置一个背景并旋转针 有人知道相关插件吗 这里有一些供您参考 http bernii github com gauge js http bernii github com gauge
  • 网站 YouTube 嵌入视频不断播放

    我正在使用 youtube 提供的 iframe 在我的网站上嵌入视频 我还使用了一个 css 弹出窗口 这是我从这个页面学到的http www pat burt com web development how to do a css po
  • VBA / HTML / jQuery 选择自动完成 - 在列表中选择

    我正在尝试使用 Excel 中的 VBA 在网站的列表中选择一个值 这不是一个 正常列表 该网站使用 jQuery 选择自动完成 如下所示 example http davidwalsh name demo jquery chosen ph
  • 如何使用canvas.toDataURL()将画布保存为图像?

    我目前正在构建一个 HTML5 Web 应用程序 Phonegap 本机应用程序 我似乎不知道如何将画布保存为图像canvas toDataURL 有人可以帮我吗 这是代码 有什么问题吗 我的画布被命名为 canvasSignature J
  • Leaflet js虚构地图

    我是 Leaflet 的新手 我想了解如何创建完全交互式的虚构地图 我有一张图像想要转换为传单地图 该图像基本上像图表一样具有许多连接和点 我想首先将该图像转换为地图 能够将鼠标悬停在这些点上 突出显示它们并显示有关它们的信息 并且还可以在
  • 是否可以使用 javascript 测试用户的浏览器/操作系统是否支持给定类型的链接?

    是否可以使用 javascript 或其他任何东西 测试用户的操作系统 浏览器是否支持给定的 url 方案 例如 大多数仅使用网络邮件的用户计算机上未设置 mailto 是否有可能以某种方式捕获单击 mailto 链接的尝试并弹出比浏览器错
  • Node.js - console.log 不显示数组中的项目,而是显示 [Object]

    我在注销对象内数组的内容时遇到问题 实际的物体看起来像这样 var stuff accepted item1 item2 rejected response Foo envelope from The sender to new item1
  • JavaScript 中数组的 HTML 数据列表值

    我有一个简单的程序 它必须从服务器上的文本文件中获取值 然后将数据列表填充为输入文本字段中的选择 为此 我想要采取的第一步是我想知道如何动态地将 JavaScript 数组用作数据列表选项 我的代码是
  • 如果链接包含特定文本,jQuery 将类添加到 href

    我的网站上的列表中有一些动态填充的链接 这些链接链接到文件 是否可以使用 jQuery 查看文件名是否以 pdf 结尾 并在 href 或类似的链接文本以 mp3 结尾时添加一个类 例如 我的列表中有以下链接 文件1 pdf 歌曲1 mp3
  • Javascript - 将值从下拉框传递到 Google Maps API

    我正在使用 Google 地图 API 为一家出租车公司创建报价表 目前 用户在 2 个文本框中输入出发点和接载点 API 会计算两点之间的距离以及行程费用 我正在尝试添加两个具有设定位置的下拉框 以便用户可以选择这些位置之一或使用文本框输
  • 如何在jquery中获取保存时间和当前时间的差异?

    我想在 javascript 或 jquery 中获取保存时间和当前时间之间的时差 我节省的时间看起来像Sun Oct 24 15 55 56 GMT 05 30 2010 java中的日期格式代码如下 String newDate 201
  • 无法在前端使用 JavaScript Fetch API 将文件上传到 FastAPI 后端

    我正在尝试弄清楚如何将图像发送到我的 API 并验证生成的token那是在header的请求 到目前为止 这就是我所处的位置 app post endreProfilbilde async def endreProfilbilde requ
  • Jquery - 通过在字符串中构建 id 的 id 获取元素

    我在使用 jquery 元素时遇到问题 我正在 var 中构造名称 例如 var myId myGotId myId attr title changed myId 返回空 我想通过 id 获取我的元素 但动态构建我的 Id 连接字符串 编
  • 防止文本区域出现新行

    我正在开发聊天功能 使用 Vue 并使用文本区域作为输入 以便溢出换行 并且对于编写较长消息的用户来说更具可读性 不幸的是 当用户按下 Enter 键并提交时 光标会在提交之前移动到新行 从而使用户体验感觉不佳 关于如何使用普通 Javas
  • 在 Javascript 中减少/分组数组

    基于this https stackoverflow com a 40774906 3254598例如 我想以稍微不同的方式按对象进行分组 结果应该如下 key audi items make audi model r8 year 2012
  • 用于 C# XNA 的 Javascript(或类似)游戏脚本

    最近我准备用 XNA C 开发另一个游戏 上次我在 XNA C 中开发游戏时 遇到了必须向游戏中添加地图和可自定义数据的问题 每次我想添加新内容或更改游戏角色的某些值或其他内容时 我都必须重建整个游戏或其他内容 这可能需要相当长的时间 有没
  • 在 GWT 中,在任何主机页标记上添加事件处理程序

    我想为任何标签添加 MouseOver 事件处理程序 举个例子 我想为旧版 HTML 页面中的每个锚点页面添加事件处理程序 继GWT指南 http code google com webtoolkit doc 1 6 DevGuideUse

随机推荐

  • 如何选择shell输出的最后一行

    你好 我有一个像这样的 shell 命令 s3 awk BEGIN print S3 bucket path Executing command queryId sub queryId space q 0 s3 print 10 OFS h
  • Java 中的就地快速排序

    为了刷新一些 Java 我尝试实现一个可以对整数数组进行排序的快速排序 就地 算法 以下是我到目前为止得到的代码 你可以通过以下方式调用它sort a 0 a length 1 如果两个 指针 都存在 则此代码显然会失败 进入无限循环 i
  • 如何在 R 中创建自累积向量

    我觉得这个很简单 但是我的R功夫很弱 我正在尝试以累积的方式创建其自身的向量 这段代码可以工作 但我想要更优雅和自动化的东西 我有数百万行需要累积 a lt c 4 4 5 1 9 a lt a order a k lt a 1 lengt
  • Tessnet2 Init-Method 在某些 tessdata 路径下崩溃

    我正在使用 Tessnet2 程序集 它使用 Tesseract 来进行 OCR 不幸的是 在我调用 init 方法后 程序崩溃了 没有任何异常 tessnet2 Tesseract ocr new tessnet2 Tesseract o
  • SQL 挑战/难题:如何合并嵌套范围?

    此挑战基于涉及 IP 范围的现实生活用例 我带来的解决方案基于堆栈跟踪我之前提出过的挑战 每个范围开始都被视为PUSH操作 每个范围结束 1 被视为POP手术 挑战 我们有一个范围数据集 其中每个范围都有起点 终点和值 create tab
  • XSLT - 在输出中用转义文本替换撇号

    我正在编写一个 XSLT 模板 需要为 xml 站点地图输出有效的 xml 文件
  • WPF 图像控件中的初始图像

    我的项目中有一个从互联网加载的 WPF 图像控件 延迟加载 我想在图像控件中显示初始图像 直到主图像加载 请帮助我
  • 为什么 Python 不会因切片越界而抛出错误? [复制]

    这个问题在这里已经有答案了 MATLAB 为此抛出错误 gt gt a 2 3 4 gt gt a 3 4 index out of bounds 如果用 Python 尝试类似的事情 为什么它不是非法的 gt gt gt a 2 3 4
  • 区分“没有行受到影响”和行成功更新为相同值(MySQL 和 PHP)

    我正在从 PHP 执行 SQL MySQL 命令 每次执行有几种可能的结果 记录更新为新值 记录已更新 但值恰好相同 记录找不到要更新的行 即没有行与WHERE clause 我想知道如何区分 的 1 和 3 两种情况都返回零作为受影响的行
  • 为什么在请求中使用 Cache-Control 标头?

    这一页 on Cache Control指定以下内容 可以使用的标准缓存控制指令由客户在一个 HTTP 请求 我认为只有服务器会发回有关客户端是否应该缓存响应的信息 为什么客户端要向服务器发送缓存信息 客户端和服务器之间可以有任意数量的中间
  • TCL:Windows 中线程之间的双向通信

    我需要在 Tcl 中的线程之间进行两种方式的通信 而我所能得到的只是一种将参数作为我唯一的 master gt helper 通信通道传入的方式 这是我所拥有的 proc ExecProgram command if catch open
  • 如何将数据模板分配给文本框wpf

    文本框应该显示某些访问权限的隐藏美元金额 我创建了一个转换器类 继承自 IValueConverter 来通过实现转换方法来处理屏蔽 public object Convert object value Type targetType ob
  • 如何将 Memory Sanitizer 与 GCC 一起使用?

    我想在 gcc 中使用这种消毒剂 我怎样才能做到这一点 这样的手术可以吗 我找到了 clang 的解决方案 clang fsanitize memory fno omit frame pointer g O2 umr cc但我不知道如何在
  • 如何更新 RestTemplate 以正确映射 Java 日期?

    我有一个问题 我的RestTemplate postForEntity url restRequest RepoResponse class 调用失败 因为它无法反序列化以下形式的日期 2019 02 01T12 00 00 000 050
  • 动画 matplotlib imshow

    让我首先澄清一下 我并不是想生成像中那样的随机游走线this和许多其他问题 我正在尝试制作一个随机游走热图 它会随着点的重新访问而改变颜色 例如this I ve been able to create still lifes like t
  • 如何通过事件从 UserControl 的代码隐藏中触发 JS

    在 ASP NET C 中 我想从 UserControl 的代码隐藏中显示 ALERT HI 但不起作用 用户控制
  • Ant调试和ant发布失败

    我正在尝试使用 ant 在命令行上生成 apk 我可以使用 ant clean 但对于 ant debug 和 ant release 命令我收到以下错误 构建失败 C Android sdk tools ant build xml 649
  • 是否可以下载旧版本的 XCode?

    我不经常使用 XCode 进行开发 最近 MacPorts 告诉我 我需要获得 3 1 才能使包正常工作 我去了苹果 他们给了我最新的版本 结果只适用于 OSX 6 因为我有 OSX 5 所以它对我没有任何帮助 目前有什么方法可以从苹果获得
  • 如何对输入字段进行分区以在屏幕上显示为单独的输入字段?

    看图片 我想要设计如图所示的内容 其中用户需要输入 4 位一次性密码 OTP 现在我已经通过 4 个单独的输入然后在 javascript 中组合值来实现这一点
  • 如何在 D3.js 力定向图中设置焦点节点?

    我有一个数据集 它定义了在力定向图中使用的多个节点 看起来像 var nodeSet id N1 name Node 1 type Type 1 hlink http www if4it com id N2 name Node 2 type