d3.js 受形状约束的力定向布局

2024-01-28

我想知道是否有一种方法可以使用 d3.js 创建强制导向布局并通过任意形状限制它,这样

  • 所有节点均等分布within形状和
  • 边界和节点之间的距离等于节点之间的距离

我希望已经有这样的解决方案。否则,我的想法是从力导向布局开始,并在每次迭代中检查从节点到边界的距离。您那边有什么建议吗?


你的想法也是我的。在勾选功能中,您可以添加额外的力。这是我的建议(未经测试):

force.on('tick', function(e) {

  node
    .each(calcBorderDistance)
    .attr('transform', function(d) {
      d.x -= e.alpha*(1/Math.pow(d.borderDistance.x,2);
      d.y -= e.alpha*(1/Math.pow(d.borderDistance.y,2);
      return 'translate(' + d.x + ',' + d.y + ')'; // Move node
    });
});

function calcBorderdistance(d) {
  // Insert code here to calculate the distance to the nearest border of your shape
  var x = ..., y = ...;
  d.borderDistance = {'x':x,'y':y};
}

我根据优秀论文中的公式松散地计算了到最近边界函数的反二次距离。下图说明了本文中的方法如何影响由框包围的绘图节点:

这张图说明了具有不同约束的情况,涉及节点之间的链接:

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

d3.js 受形状约束的力定向布局 的相关文章

  • 为什么 AngularJS 在使用 ng-bind-html 时会去掉 data- 属性?

    我正在使用 contentEditable div 来使用户能够格式化他们的文章 我对html内容做了一些处理并保留它 我在用ng bind html当观众想要阅读文章时呈现结果 我不想使用 sce trustAsHtml因为我仍然希望 A
  • 应用程序关闭时监听 firebase 数据库更改

    我正在使用 firebase 创建一个 Ionic 2 应用程序 当应用程序关闭时 即在前台 后台和终止 我需要一种方法来侦听数据库更改 特别是在 child added 上 基本上 我想使用 WebRTC 在应用程序内拨打电话 例如 Wh
  • Promise.all 返回一个未定义的数组并在完成之前解析

    我在返回数组的函数时遇到问题undefined 这是代码 classMethods getQueries function models dbId dateStart dateEnd return new Promise function
  • 设置 JavaScript 对象的 length 属性

    假设我有一个 JavaScript 对象 function a var A this length function return A length this add function x A push x this remove func
  • React 测试库:当输入表单上的 fireEvent 更改时,给定元素没有值设置器

    我想改变的值材质用户界面 https material ui com components text fields TextField在反应测试库中 我已经设置了 data testid 然后使用getByTestId我拿起了输入元素 th
  • .getDay() 奇怪的行为[重复]

    这个问题在这里已经有答案了 有一个例子 console log new Date 2013 02 24 getDay 24 gt 0 24 console log new Date 2013 02 25 getDay 25 gt 1 25
  • 重置输入控件的边框颜色 (HTML/Javascript)

    有谁知道使用 javascript 修改输入控件后如何重置它的边框颜色 通过突出显示其中包含不正确或无效数据的字段等来进行验证非常有用 例如 改变边框 document getElementById myinput style border
  • 当容器有选择框时 jQuery mouseleave 触发问题

    我有两个容器 一个嵌套在另一个容器内 当我将鼠标悬停在父容器上时 我希望显示子容器 当我鼠标移出时 我希望子容器淡出 我遇到的问题是子容器有一个包含 选择框 的表单 当用户选择选择框时 会意外触发 mouseleave 事件 如何阻止选择框
  • 所有属性的 JavaScript getter

    长话短说 我现在的情况是想要一个 PHP 风格的 getter 但是是 JavaScript 的 我的 JavaScript 仅在 Firefox 中运行 因此 Mozilla 特定的 JS 对我来说没问题 我能找到的制作 JS gette
  • Node.JS Web 服务器中的安全性

    所以 我正在学习 Node JS 到目前为止我很喜欢它 我已经有几个项目在工作了 我想我可以在其中使用nodejs 不过 我担心安全问题 如果我使用 Node JS http 模块编写自定义 Web 服务器 我是否可能非常容易受到攻击 Ap
  • JavaScript 中的自定义“确认”对话框?

    我一直在开发一个使用自定义 模式对话框 的 ASP net 项目 我在这里使用吓人引号 因为我知道 模式对话框 只是我的 html 文档中的一个 div 它被设置为出现在文档其余部分的 顶部 而不是真正意义上的模式对话框 在网站的许多部分
  • 在没有全局变量的情况下对多个事件使用 Promise 回调

    我有一个包含在函数中的承诺 我将使用不同的输入参数多次调用该函数 每次承诺解决时 我都会将解决的值推送到存储数组中 当我所有的调用承诺都得到解决后 我将在其他函数中使用这个存储数组 是否有任何干净的方法可以在不使用 全局 变量的情况下进行设
  • Google Apps 脚本:如何水平对齐 inlineImage

    我有以下代码 它是一个更大程序的一部分 我正在尝试将图像从我的 Google 驱动器插入到 Google 文档中 并调整其大小并居中 到目前为止 我能够让程序插入图像并调整其大小 但我不知道如何使 inlineImage 居中 我是使用谷歌
  • 如何检查 URL 末尾是否有特定字符串

    我需要根据 URL 末尾的内容让覆盖层向下滑动 如果 URL 末尾有 faq 覆盖层下降 如何在 jQuery JavaScript 中做到这一点 如果您的网址看起来像这样http yourdomain com faq 你可以这样做 var
  • 谷歌地图通过骨干javascript返回div标签但不显示

    我已经开始使用地理定位 我可以获得坐标等 我想在地图中显示它 但是当我将地图返回到 div 时 什么也没有显示 现在我查看了 div 地图正在返回 但只是不可见 这是有问题的 div 请注意 这似乎只是一个小地图的链接 a style di
  • CasperJS:如何单击所有选定的按钮?

    我正在尝试使用 CasperJS 作为网络抓取工具 并且有一个带有按钮的页面 单击该按钮将加载数据 因此 我想先单击所有这些按钮 然后等待 然后再实际进行查询以获取所有必要的数据 问题是对于 Casper casper thenClick
  • 错误:Javascript 上的 [object Object]

    当我在 Firebug 中运行下面的 javascript 时 我不断收到错误 我已经尝试更改多项内容 但它仍然输出错误 我正在使用 api 从 XML 检索信息 然后将其输出到屏幕上 但我不断收到对象错误 有人能看出为什么吗 任何帮助表示
  • 如何在 Mongo 聚合管道的 $unwind 阶段保留零长度值?

    我正在使用聚合管道编写 Mongo 查询 在聚合过程中 我需要 unwind领域之一 但是 我不想要 unwind排除该字段具有零长度数组的条目 因为我仍然需要它们进一步深入管道 我的领域叫做items它是一个对象数组 每个对象包含两个值
  • 1° 夏令时 Java 和 JS 表现出不同的行为

    假设巴西利亚 GMT 0300 夏令时于 21 10 2012 00 00 00 此时时钟应提前一小时 Java new Date 2012 1900 9 21 0 0 0 Sun Oct 21 01 00 00 BRST 2012 Chr
  • 如何通过 jQuery onblur 提交表单

    所以我尝试通过 jQuery onblur 提交表单 即一旦焦点离开密码字段 表单就会通过 jQuery 提交 有类似的问题 但这不是我要找的 我尝试使用 document getElementById 但它不起作用 任何帮助表示赞赏 提前

随机推荐

  • MVC5 的嵌套布局

    我看过一些关于这个主题的帖子 具有级联部分的 Razor 嵌套布局 https stackoverflow com questions 5525602 razor nested layouts with cascading sections
  • SSRS 与 Crystal Reports [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 控制多个 JMS 队列的消耗

    我在任何地方都找不到这个信息 我有两个队列 JmsListener destination p1 JmsListener destination p2 如何确保我一次只处理 1 条消息 即使我正在监听 2 个队列 以及如何配置对首先从哪个队
  • 在xamarin中创建一个cocossharp项目

    我是xamarin studio的新手 我试图按照官方指南创建一个cocosproject 但是这个文档不是很清楚 我的项目有很多错误 https developer xamarin com guides xamarin forms adv
  • 多个触发器对一个表具有相同的操作时间和事件mysql错误

    我是触发器新手 并且收到 一张表的多个触发器具有相同的操作时间和事件 错误 我创建了一个更新后和删除后 这是两个单独的操作时间 事件 所以我不太确定为什么会收到错误 这是我的查询 CREATE TRIGGER new enrolment A
  • Caret 包 - 定义积极结果

    在使用 Caret 包进行机器学习时 我对 Caret 的默认 正 结果选择感到震惊 即二元分类问题中结果因素的第一级 软件包说它可以设置为替代级别 任何机构可以帮助我定义积极的结果吗 感谢您 看看这个例子 使用混淆矩阵从插入符号示例中扩展
  • 在 Rstudio 的查看器中显示 Rd 文件

    我在项目文件夹中有函数和数据集的文档 在文档文件夹中 我有所有数据集的 Rd 文件 我希望用户能够调用自定义帮助函数并在查看器中启动 Rd 文件 就像从文件编辑器编译文件时自动完成的那样 是否有可能做到这一点 我不太明白你为什么要这样做 但
  • MagicalRecord:多个数据库

    我有一个使用 MagicalRecord 的应用程序 并且我正在使用大量用于参考的数据预先填充数据库 在同一数据模型中 我拥有与用户在应用程序中可能执行的操作相关的用户可定义信息 该应用程序被拒绝 因为预填充的数据应该被标记为 不备份 因此
  • 异常情况下自动回滚有什么缺点?

    当您编写 Flask sqlalchemy 应用程序并进行数据库查询 异常处理时 如下所示 def add user user User gt bool was the user added errors try db session ad
  • 塑料单片机。这是正确的解决方案吗? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我知道已经有一些关于塑料 SCM 的问题 但它们已经存在一年多了 最近有人用过Plastic SCM吗 你怎么看待这件事 我已经使用过 git
  • pandas:如何绘制 pandas 中 IMDB 电影的电影数量与类型的饼图?

    我有以下数据集 import pandas as pd import numpy as np matplotlib inline df pd DataFrame movie A B C D genres Science Fiction Ro
  • 存在同名数据库,或无法打开指定文件,或位于 UNC 共享上

    当我在新电脑上运行我的项目时出现此错误 为了避免这种情况 我每次都必须复制粘贴新的连接字符串 有什么办法可以避免这种情况 我有3个不同的数据库 它非常烦人的O O SqlConnection con new SqlConnection Da
  • 复合键作为外键(sql)

    这是我关心的两个表 CREATE TABLE IF NOT EXISTS tutorial beggingTime time NOT NULL day varchar 8 NOT NULL tutorId int 3 NOT NULL ma
  • gulp:gulp任务回调函数在哪里定义的?

    gulp 中的任务可以这样定义 gulp task foobar function callback 我想了解回调函数是什么 它在哪里定义的 我可以在运行时传入其他函数作为参数吗 它有什么作用 这些文档 https github com g
  • 如何在 WPF 弹出窗口中放置关闭 [x]

    我已经在 c 和 wpf 中使用此代码成功创建了一个弹出窗口
  • 为什么我的 Twitter Bootstrap 表单字段使用流体容器会溢出?

    更新 问题演示在这里 http jsfiddle net fdB5Q embedded result http jsfiddle net fdB5Q embedded result 从大约 767 像素到 998 像素 表单字段比包含井更宽
  • 如何隐藏 TieredCompilation 警告?

    我正在使用 Linux Mint 和 OpenJDK java version显示这个 java version 1 7 0 79 OpenJDK Runtime Environment IcedTea 2 5 6 7u79 2 5 6 0
  • 为什么 bash 按字典顺序而不是数字来评估数字比较?

    有人可以解释一下 if 重击块 我使用下面的简单代码检查是否第一个值小于第二个值 first value 67 second value 2 if first value lt second value then echo Yes else
  • WiX .NET Bootstrapper - 功能选择

    我们正在尝试获取自定义 NET Bootstrapper 以便通过我们的 WiX 安装程序有选择地安装 MSI 包中的功能 注册了 PlanMsiFeature 事件后 我们认为我们将能够访问 MSI 中的功能并根据预设条件排除某些功能 然
  • d3.js 受形状约束的力定向布局

    我想知道是否有一种方法可以使用 d3 js 创建强制导向布局并通过任意形状限制它 这样 所有节点均等分布within形状和 边界和节点之间的距离等于节点之间的距离 我希望已经有这样的解决方案 否则 我的想法是从力导向布局开始 并在每次迭代中