如何更改力布局中节点之间的距离?

2024-01-04

我是 D3 的新手,正在尝试学习力布局。我想改变节点之间的链接距离并保持原点形状。我发现在更改链接的距离后,布局发生了变化。

图一是原来的布局,然后我用代码改变了链接距离distance([150])(第80行)使节点更进一步,但布局的变化超出了我的预期。

我预计布局会随着保持形状与原来相同而增长,但布局发生了很大变化。我现在不确定链接距离的含义。 有人可以帮忙吗?谢谢你!我在 codepen 上的代码 https://codepen.io/smilebuz/pen/LBxePw


根据其定义,力导向图是动态的:您无法预先设置节点的位置,或期望节点将落在给定位置。

D3力模拟有如此多的参数,其中一个微小的改变就可以使布局完全不同。这实际上是预期的。

所以,就你而言,这里没有什么奇怪的。您可以尝试几种不同的解决方案。在我看来,保持(大约)您想要的结构并在节点之间有更大间隔的方法是使用forceCollide,为中心节点(橙色节点)设置不同的半径:

.force('collide', d3.forceCollide(function(d){
    return d.id === "j" ? 100 : 50
}));

这是更新后的 CodePen:https://codepen.io/anon/pen/xJgYmP?editors=0010 https://codepen.io/anon/pen/xJgYmP?editors=0010

这里是堆栈片段中的相同代码:

graph = {
  nodes: [{
      id: 'a',
      group: 1
    },
    {
      id: 'b',
      group: 1
    },
    {
      id: 'c',
      group: 1
    },
    {
      id: 'd',
      group: 2
    },
    {
      id: 'e',
      group: 2
    },
    {
      id: 'f',
      group: 2
    },
    {
      id: 'g',
      group: 3
    },
    {
      id: 'h',
      group: 3
    },
    {
      id: 'i',
      group: 3
    },
    {
      id: 'j',
      group: 4
    }
  ],
  links: [{
      source: 'a',
      target: 'b',
      value: 2
    },
    {
      source: 'a',
      target: 'c',
      value: 2
    },
    {
      source: 'b',
      target: 'c',
      value: 1
    },
    {
      source: 'd',
      target: 'e',
      value: 2
    },
    {
      source: 'd',
      target: 'f',
      value: 2
    },
    {
      source: 'e',
      target: 'f',
      value: 1
    },
    {
      source: 'g',
      target: 'h',
      value: 1
    },
    {
      source: 'g',
      target: 'i',
      value: 2
    },
    {
      source: 'i',
      target: 'h',
      value: 2
    },
    {
      source: 'a',
      target: 'j',
      value: 2
    },
    {
      source: 'b',
      target: 'j',
      value: 1
    },
    {
      source: 'c',
      target: 'j',
      value: 1
    },
    {
      source: 'd',
      target: 'j',
      value: 1
    },
    {
      source: 'e',
      target: 'j',
      value: 1
    },
    {
      source: 'f',
      target: 'j',
      value: 1
    },
    {
      source: 'g',
      target: 'j',
      value: 1
    },
    {
      source: 'h',
      target: 'j',
      value: 2
    },
    {
      source: 'i',
      target: 'j',
      value: 2
    },
  ]
}
var graph = this.graph

var svg = d3.select('svg')
var width = +svg.attr('width')
var height = +svg.attr('height')

var color = d3.scaleOrdinal(d3.schemeCategory20)

var simulation = d3.forceSimulation()
  .force('link', d3.forceLink().id(function(d) {
    return d.id
  }))
  .force('charge', d3.forceManyBody())
  .force('collide', d3.forceCollide(function(d) {
    return d.id === "j" ? 100 : 50
  }))
  .force('center', d3.forceCenter(width / 2, height / 2))

var link = svg.append('g')
  .attr('class', 'links')
  .selectAll('line')
  .data(graph.links)
  .enter().append('line')
  .attr('stroke-width', function(d) {
    return Math.sqrt(d.value)
  })

var node = svg.append('g')
  .attr('class', 'nodes')
  .selectAll('circle')
  .data(graph.nodes)
  .enter().append('circle')
  .attr('r', 5)
  .attr('fill', function(d) {
    return color(d.group)
  })
  .call(d3.drag()
    .on('start', dragstarted)
    .on('drag', dragged)
    .on('end', dragended))

node.append('title')
  .text(function(d) {
    return d.id
  })

simulation
  .nodes(graph.nodes)
  .on('tick', ticked)

simulation.force('link')
  .links(graph.links)

function ticked() {
  link
    .attr('x1', function(d) {
      return d.source.x
    })
    .attr('y1', function(d) {
      return d.source.y
    })
    .attr('x2', function(d) {
      return d.target.x
    })
    .attr('y2', function(d) {
      return d.target.y
    })

  node
    .attr('cx', function(d) {
      return d.x
    })
    .attr('cy', function(d) {
      return d.y
    })
}

function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart()
  d.fx = d.x
  d.fy = d.y
}

function dragged(d) {
  d.fx = d3.event.x
  d.fy = d3.event.y
}

function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0)
  d.fx = null
  d.fy = null
}
.links line {
  stroke: #999;
  stroke-opacity: 0.6;
}

.nodes circle {
  stroke: #fff;
  stroke-width: 1.5px;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<div class="container">
  <svg width="960" height="600"></svg>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何更改力布局中节点之间的距离? 的相关文章

  • 如何从此 d3.js layout.tree 获取树祖先和树后代的列表?

    我正在尝试和修改this https bl ocks org mbostock 4339083d3 js 的示例 用于根据 JSON 树结构绘制树 这就是树的一部分开始时的样子 我正在尝试进行两个单独的修改 但我不知道该怎么做 当单击节点的
  • Dimple.js - 将数据标签添加到条形图的每个条形

    我使用的是dimple js 它基于d3 js 是否可以向本示例中提到的条形图的每个条形添加数据标签http dimplejs org examples viewer html id bars vertical http dimplejs
  • 如何处理 d3 中 Beeswarm 图中的碰撞?

    我一直在玩这个例子here https gf neocities org co2bs co2bee html一会儿 我想做的是突出显示图中的单个节点 圆圈 通过使用边框使其变大 稍后我也想在其中添加文本或字母 目前 我已经圈了Bhutan图
  • 错误:美学必须是长度一,或者在省略 NA 时与 dataProblems:personCategoryz 的长度相同

    我正在尝试使用泰坦尼克号数据集创建一个图表 该数据集查看女性 儿童和男性及其生存率 我创建了新的类别来读取数据 但当我尝试超越该点时 不断出现错误消息 当我运行一个图表来显示这一点时 它显示得很好 只是它有一个单独的 NA 数据类别 所以我
  • D3 强制布局,较大的节点聚集在中心

    我一直在修改将用于标签云的强制布局 每个标签都由一个
  • 表格中与文本一起内嵌 D3 迷你图

    假设有一个这样的表 var data Orange Orange 6 3 3 2 5 Apple Red 6 2 6 5 5 Grape Purple 9 1 2 3 1 我希望将字符串表示为字符串 但将数字数组表示为 D3 折线图 如果这
  • D3 删除千位的逗号分隔符

    我有一个包含 3 列的 json 其中一列是 年份 该列仅包含年份 没有日期 当我在 x 轴上绘制它时 年份会以逗号分隔符表示数千 所以在 json 中 日期的格式是 Year 1990 在 x 轴上 结果是 1 990 我一直在试图弄清楚
  • 创建链接到 csv 文件的表

    我正在尝试创建一个链接到的表 csv使用 d3 文件 但我得到的只是一个空白网页 即使以克里米亚为例 我也得到一张空白页 我将很高兴得到指导或展示一个可行的例子或关于我做错了什么的建议 如果您询问如何从 CSV 数据创建 HTML 表 这就
  • 使用 classed("active",true) 鼠标悬停时 D3 颜色变化

    我是 js 和 D3 的新手 我已经生成了某种热图 并且想使用 D3 的 on mouseover 更改图块的颜色 我可以显式更改颜色 但想使用 CSS 活动规则 可能是一些简单的东西可以修复 任何帮助将不胜感激 完整代码如下 Thanks
  • 调整发散堆积条形图以使用通用更新模式

    我一直在使用可用的堆积条形图示例here https bl ocks org mbostock b5935342c6d21928111928401e2c8608使用以下代码 var data month Q1 2016 apples 384
  • 根据 D3 中的属性值对对象进行排序

    我有一系列在 D3 中使用的对象 例如 var cities city London country United Kingdom index 280 city Geneva country Switzerland index 259 ci
  • 时间序列折线图与轴不同步

    本实验基于这个d3官方例子 http bost ocks org mike path 我想要实现的是可视化时间序列数据的最后 x 分钟 我有这个代码的副本jsfiddle http jsfiddle net 225dC 3 单击以添加新数据
  • 如何让d3.js生成svg而不绘制它?

    有没有办法只生成 svg 并将其作为字符串获取 而不实际绘制它 我考虑过将 svg 渲染到隐藏的 div 然后读取内部 html 但是有没有更干净的方法 我认为你可以这样做 var svg d3 select body append svg
  • svg / d3.js 矩形一侧的圆角

    我知道 svg 有一个内置函数可以做圆角 但我只需要在四个角中的 2 个上做圆角 我知道我可以在彼此之上绘制多个矩形来模仿这一点 但这看起来有点俗气 有什么方法可以使用剪辑或任何 d3 js 方法来做到这一点吗 现在我有一个水平条形图 其中
  • 使用 Meteor 中的 D3 访问 csv 文件

    我已经使用 D3 成功渲染了一个 HTML 表格 显示了 csv 文件中的数据 但是当我将相同的代码移入 Meteor 项目时 我遇到了问题 传递到 d3 csv 回调中的数据对象一次拾取 HTML 文件 1 行 而不是 csv 数据 仅当
  • 节点大小与 D3 中的子节点数量成正比

    我创建了这个点击 展开 折叠网络 http jsfiddle net 5Lv8gkqv http jsfiddle net 5Lv8gkqv var width 960 height 500 root name Chocolate tag
  • d3.js - .exit().remove() 组元素不起作用

    我正在构建一个动态条形图 查看肯尼亚和坦桑尼亚男孩和女孩的考试成绩 用户可以从下拉菜单中选择他们想要查看哪个国家 肯尼亚 坦桑尼亚 和哪一年 2010 年 2011 年 的分数 我已清理所有数据并将其组织到单独的国家 地区年份 csv 文件
  • D3:在一个文件夹中加载多个csv数据文件

    我正在使用 d3 创建可视化 我的数据由同一文件夹中的 80 多个 CSV 文件组成 所以我想知道是否有一种简单的方法可以加载所有这些 我在想也许检查文件夹中有多少文件 然后递归加载它们 不过D3好像不行 任何建议 将不胜感激 谢谢 当你想
  • 如何在 React 组件中使用 CDN

    我正在尝试使用基于 D3 构建的库 称为 Greuler 来动态渲染图形 它的 npm 包似乎已损坏 当我改用 Greuler CDN 时 index html 中的测试图终于起作用了 但是 我正在开发一个 React 应用程序 并且我希望
  • 如何部分或仅按百分比沿路径过渡

    我是 d3 的初学者 目前无法使用最新版本 但我使用的是 3 x 版本 我想要实现的应该很简单 但遗憾的是我没有找到有关如何做到这一点的资源 目标是在我的 svg 中显示一条路径 然后我想显示例如一个圆并沿着路径过渡 移动 追踪圆 如果我想

随机推荐

  • 如何在android中使用rawQuery()

    我有一个这样的sql查询 String loadFav SELECT id title name favorite FROM table1 where favorite 1 UNION ALL SELECT id title name fa
  • 如何在AWS SES html模板中添加添加if条件?

    要求是根据从 api 接收到的正文数据发送模板邮件 BodyData 可能不包含某些标签 请参阅下面的示例模板部分 p sender has invited you to join team teamName p 因此正文数据可能不包含团队
  • 在持续时间参数(# 行、秒、#Tweets 等)后停止 Tweepy 流

    我正在使用 Tweepy 捕获基于主题标签 WorldCup 的流式推文 如下面的代码所示 它按预期工作 class StdOutListener StreamListener Handles data received from the
  • 使用 boost.python 时 C++ 流有什么问题?

    更新 2 我不知道为什么这个仍然被投票 2014 年 3 月 自从我多年前问过这个问题以来 这个问题似乎已经解决了 确保您使用的是最新版本的 boost 更新 也许 C 流需要初始化才能格式化数字 而在 Python 中加载共享库时初始化没
  • 索引/匹配 - 如果第一个值为空,则查找第二个值

    我希望在用 Excel 编写公式时得到一些帮助 我有一个表 其中包含员工列表及其手机号码 但是 该表的结构方式存在许多空白行和重复行 本质上 我希望通过对相应的手机号码执行查找来创建一个没有任何重复项和空白的新表 问题是 当我执行标准索引
  • 如何在 Kubernetes Python 客户端中指定 ca_bundle

    我正在尝试使用Kubernetes Python 客户端 https github com kubernetes client python连接到我的 Kubernetes 集群 该 API 位于我的 CA 签署的 SSL 证书后面 如果我
  • 使用 jwt 和许多角色进行基于角色的访问

    我有一个带有许多控制器的 Web api 通过这些控制器 我定义了很多角色并装饰了控制器 功能 为了访问 api 我使用 jwt 我尝试将我的角色写入 jwt 之类的键值中 这工作正常 但如果我在 jwt 中设置许多角色 令牌就会变得非常大
  • Bootstrap 3.1.0:附加太长

    我在用引导程序3 1 0 当 附加 对于视口来说太长时 它会被切断 永远不会显示底部项目 是否有可能让 Bootstrap 的词缀以用户仍然可以从上到下滚动完整词缀的方式运行 有问题的例子 div class container div c
  • Python 中列的绝对值

    如何将 计数 列的值转换为绝对值 我的数据框的摘要如下 datetime count 0 2011 01 20 00 00 00 14 565996 1 2011 01 20 01 00 00 10 204177 2 2011 01 20
  • Python快速异或超范围算法

    有一个编程挑战 需要生成一个XOR基于序列起始号和间隔长度的校验和 它要求您根据间隔长度迭代序列 并在每次迭代时不断减少为校验和计算选取的元素数量 Example 如果起始编号是0间隔长度为3 该过程将如下所示 0 1 2 3 4 5 6
  • java中堆内存和字符串常量池有什么区别

    In Java 使用创建的对象新操作员将被存储在堆 记忆 使用创建的对象字符串字面量存储在 这字符串常量池 我正在运行以下代码来检查哈希码 String nameOne Deepak String nameTwo new String De
  • 混合手动\自动编号序列

    在编号顺序设置 CS201010 中 有一个手动编号选项 但是 取决于文档类型 在某些情况下 参考编号可以留空 如果它是空白的 我希望自动编号启动 或者在保存文档之前调用 NextNumber 函数 是否可以 我怎么做 目前 如果我强制执行
  • 相当于其他编译器中gcc/clang的march=native?

    我想知道除了 gcc 和 clang 之外是否还有其他编译器提供类似 march native选项 如果有 该选项是什么 我已经从另一个问题中明白了 在 Visual C 中自动构建最佳可用平台 相当于 gcc 的 march native
  • 为什么 const 成员必须在构造函数初始值设定项中初始化,而不是在其主体中初始化?

    为什么类成员必须声明为const在构造函数初始值设定项列表中而不是在构造函数主体中初始化 两者有什么区别 在 C 中 当执行进入构造函数主体时 对象被视为完全初始化 你说 我想知道为什么 const 必须在构造函数初始值设定项列表中而不是在
  • stateChangeStart 中从子状态访问父状态的参数

    有没有办法从父状态获取参数 我的州看起来像这样 stateProvider state home url home param1 template div home div
  • 在 django-rest-framework 验证器中为整数字段强制指定整数类型

    django rest framework 验证器接受字符串引用的整数作为整数字段的有效数据 有没有办法强制规定数据类型 以便不接受字符串引用的整数 序列化器将原始数据保存在self initial data自定义验证方法可以从中检索它 所
  • 如何在 Android 应用程序中将 putExtra() 与 FLAG_ACTIVITY_REORDER_TO_FRONT 一起使用?

    我有一个应用程序 称为 App1 在我的 App1 中 我调用相机应用程序 intent new Intent Intent ACTION MAIN intent setComponent new ComponentName com and
  • 在 C# 中,“DateTime”类型中的“?”是什么?[重复]

    这个问题在这里已经有答案了 我刚刚在使用 System DirectoryServices AccountManagement 时遇到了一些代码 public DateTime LastLogon get 是什么 在日期时间之后 我找到了一
  • java.sql.Array/Blob/Clob 类型是否需要“free()”?

    我需要明确的电话吗free 在数组 clob 等上 或者关闭 ResultSet 和 或 Statement 会自动解决这个问题吗 javadoc 没有说什么 所以我认为这是没有必要的 但我不想做出错误的假设 另外 如果没有必要 立即关闭结
  • 如何更改力布局中节点之间的距离?

    我是 D3 的新手 正在尝试学习力布局 我想改变节点之间的链接距离并保持原点形状 我发现在更改链接的距离后 布局发生了变化 图一是原来的布局 然后我用代码改变了链接距离distance 150 第80行 使节点更进一步 但布局的变化超出了我