在d3.js中分离节点，避免树形图重叠
的方法是通过使用力导向布局（force-directed layout）来实现。力导向布局是一种基于物理模拟的布局算法，它模拟了节点之间的斥力和连线之间的引力，使得节点在图中分散开来，从而避免节点重叠。
具体实现步骤如下：
- 创建一个力导向模拟器（force simulation）对象，通过d3.forceSimulation()方法来实现。该模拟器将负责计算节点之间的力和位移。
- 定义节点之间的斥力，可以使用d3.forceManyBody()方法来实现。通过调整斥力的强度可以控制节点之间的距离，从而避免节点重叠。
- 定义连线之间的引力，可以使用d3.forceLink()方法来实现。通过调整引力的强度可以控制连线的长度，从而使得节点之间保持一定的距离。
- 将节点和连线添加到力导向模拟器中，可以使用force.nodes()和force.links()方法来实现。
- 在每一帧的动画中更新节点和连线的位置，可以使用force.on("tick", ...)方法来实现。在tick事件中，可以通过设置节点和连线的坐标来更新它们的位置。
通过以上步骤，可以实现在d3.js中分离节点，避免树形图重叠的效果。
在腾讯云的产品中，可以使用云服务器（CVM）来搭建和部署d3.js应用，使用云数据库（CDB）来存储和管理数据，使用云存储（COS）来存储和分发静态资源。此外，腾讯云还提供了弹性伸缩（AS）、负载均衡（CLB）等产品，可以根据实际需求来扩展和优化应用的性能和可用性。
更多关于腾讯云产品的信息，可以参考腾讯云官方网站：https://cloud.tencent.com/
相关·内容
1回答
在D3 v4中无边转义图的节点
d3.js、d3-force-directed
我构建了一个使用D3.js V4动态加载数百(有时数千)个节点的图表。尽管我试图调优它的力量，有些节点集群可能变得不那么杂乱无章，但随之而来的是，排斥强制推送节点，这些节点没有边缘到画布的边界。
似乎没有一种简单的方法来设置一个没有边缘的节点，将其吸引到离中心更近的地方。
下面是屏幕截图(注意右上角的节点)：
以下是所涉及的力量：
var repelForce = d3.forceManyBody()
.strength(-200)
.distanceMax(400)
浏览 2提问于2017-11-29得票数 4
回答已采纳
3回答
如何可视化用户集群？
cluster-analysis、data-visualization
我有一个应用程序，用户可以在其中进行交互。我想要可视化这些交互，这样我就可以确定是否存在用户集群(其中交互更频繁)。
我已经为每个用户分配了一个二维点(其中每个坐标都在0和1之间)。我的想法是，当两个用户交互时，他们的点数会更接近，这是一种“吸引力”，而我只是一遍又一遍地查看我的交互日志。
当然，我需要一种“排斥力”，它也会将用户推开，否则他们都会崩溃成一个点。
首先，我尝试监控每个XY坐标的最低和最高位置，并对它们的位置进行归一化，但这不起作用，一些交互次数较少的用户留在了边缘，其余的都挤到了中间。
有没有人知道我应该用什么方程式来移动这些点，既有用户交互时的“吸引力”，也有阻止他们全部崩溃
浏览 0提问于2008-09-18得票数 3
回答已采纳
1回答
使用矩形而不是圆形强制布局
d3.js
我想实现这个D3 force布局示例；
但我不想用圆圈，我想用正方形。
我试图构造一个碰撞函数，但它只有在我禁用重力的情况下才起作用。这不是我想要的。
this.collide = function collide(quadtree, node, alpha) {
var that = this, d = node, doSnap = false;
quadtree.visit(function(quad, x1, y1, x2, y2) {
var q = quad.point,
val,
dif,
浏览 3提问于2014-07-17得票数 0
1回答
力有向图布局的性能和复杂性？
javascript、algorithm、time-complexity、graph-layout
我有一个由数千个节点和边组成的图形，我注意到使用力定向的Cytoscape.js布局算法(cose和cola)的性能很差。
我想知道我是否应该投入时间去寻找其他库或算法，或者这些算法的复杂性一般都太高了。在一个简单的算法中，我想每个节点都必须与其他节点进行比较，所以应该存在二次型复杂度，但是如果对连通性低的数据进行巧妙的过滤，我可以想象出好的近似(我不需要数学上的完美结果，只是用户直观的东西)。
我的目标是在一台典型的用户机器上在10秒内布局一个图形。
我发现的出版物(Google学者用于“强迫导向的复杂性”)：
估计O(=^3)
说很难精确地计算(?，我不是一个图表理论家)
“在
浏览 7提问于2017-06-23得票数 1
2回答
d3.js -如何将力有向图水平展开？
javascript、svg、d3.js、force-layout
我正在d3中处理一个节点图(见此处：) --这个图本身是非常循环的(链接/节点在各个方向上分布相对均匀)--我如何使它更适合16:9的窗口呢？我想我必须展开元素的x，y位置，但我不能完全正确。
相关的D3代码：
force.on("tick", function() {
link.attr("x1", function(d) {
return d.source.x;
})
.attr("y1", function(d) {
return d.source.y;
})
.attr("x2
浏览 2提问于2014-01-08得票数 4
回答已采纳
3回答
如何控制d3力布局的仿真速度
javascript、d3.js、force-layout
我正在遵循一个类似于的d3强制布局示例。
我想控制飞向星系团的点的速度。换句话说，我希望一些点需要更多的时间来到达它们的最终位置，而一些点需要更少的时间。
我试图添加一个计时器函数来控制每个滴答的时间，但它不起作用。
this.force = d3.layout.force()
.on("tick", setTimeout(tick(d), 50));
我需要你的帮助。
浏览 1提问于2013-12-30得票数 8
2回答
使用d3.js时如何避免形状重叠
d3.js
我画圆圈通过设置一个固定的x位置，但改变y的位置。问题是，由于每个圆的半径是不同的，所以圆是重叠的。
理想情况下，在理论上，要解决这个问题，我可能希望得到前一个圆的y位置，并将当前圆的半径加到它中，得到当前圆的y位置。如果我想错了就纠正我。
现在我正在做这样的事情
var k = 10;
var circleAttributes = circles.attr("cx", '150')
.attr("cy", function (d) {
return (k++) * 10; //this is a very
浏览 3提问于2013-08-20得票数 3
回答已采纳
1回答
在d3.js中配置固定布局的静态图形
javascript、graph、svg、d3.js、force-layout
我有一个使用d3.js的静态图的工作代码示例(仅限<script type="text/javascript">部分)，如下所示：
/* Create graph data */
var nodes = [];
for (var i = 0; i < 13; i++)
{
var datum = {
"value": i
};
nodes.push(datum);
浏览 0提问于2012-08-10得票数 19
回答已采纳
3回答
无重叠的定位元素
algorithm、math、physics、overlap
我有许多要在2D空间中定位的矩形元素。我为每个元素计算一个理想的位置。现在我的问题是许多元素重叠，因为理想的位置通常集中在一个区域。我希望尽可能地避免重叠(尽管不一定要完美)。我该怎么做呢？
我听说物理模拟适用于此--是这样的吗？有没有人能提供一个例子/教程？
顺便说一句，我正在使用XNA，如果您知道有什么.NET库可以完成这项工作，请告诉我！
浏览 2提问于2010-06-18得票数 0
回答已采纳
1回答
cytoscape.js cose布局节点重叠
javascript、cytoscape.js
我试图确定如何在使用cytoscape.js库和cose布局时获得正确的间距。特别是，当我定义节点的宽度和高度时，节点往往会重叠。
这是
我试过尝试布局选项，但我没有找到任何选项为我提供我的预期结果。另外，理想情况下，我可以拥有不同大小的节点。
附带说明:当创建具有相同源和目标的边的图形时，我发现了一种奇怪的行为。布局间距就像我想的那样。(见plnkr上的红色按钮)。但如果我没有这样的优势显然也于事无补。
浏览 3提问于2016-08-26得票数 1
回答已采纳
2回答
如何重新分配图形元素以使可读性最大化？
graph、graph-theory、graph-algorithm、rectangles
我有一个由节点组成的图。每个节点可以有多个父节点和/或子节点。我想要显示这个图表和节点之间的连接。
但我不知道如何重新分配节点以最大限度地提高可读性。目前，我面临以下问题：
节点连接相互交叉过大，尽管这是不必要的，而且可以避免
节点之间的连接在视觉上太长了。
有些连接有相同的角度，因此它们重叠成为一条线。
列i和列i-2之间的连接有时直接穿过列i-1中的元素。
此外，我只能垂直移动节点，而不是水平移动，因为列的数量是有限的。
为了让自己更容易，我尝试将节点放置在类似网格的模式中。我设法把它们按栏分组。但是，我需要在列中进行迭代，并将它们与其他列进行比较，以重新排列内容。
浏览 4提问于2020-03-06得票数 2
回答已采纳
2回答
d3.js linkStrength对力图中linkDistance的影响
javascript、d3.js、force-layout
我正在绘制一个图表来显示不同节点之间的关系。节点之间的关系越密切(根据业务逻辑)，节点就应该越紧密。
我注意到与linkStrength of .1的一些链接更短(这就是我想要实现的)，而其他一些具有相同强度的链接比linkStength of 1的链接更长。从有关部队布局参数的文档中，我现在找到了以下引用：
默认的linkStrength值为1.0，这将保持linkDistance的全部效果。但是，通过将linkStrength的值设置为小于1，可以放松距离约束。
这是否意味着如果我将linkDistance设置为150，与linkStrength(1.0)的链接将比linkStre
浏览 3提问于2015-12-18得票数 3
回答已采纳
1回答
D3.js力导布局中的弹力？
javascript、d3.js、graph-visualization、graph-layout、force-layout
这个例子的描述是： (见下图)，说明它是“对带电粒子和弹簧的物理模拟，将相关字符放置在更接近的位置。”
我只是好奇代码的哪一部分(在同一页上)实现或定义了弹力，特别是基于相关字符？
我问这个是因为我的印象是D3.js没有为Force directed布局实现弹力，正如它的API文档中所提到的：
“链接不像其他力导向布局中常见的那样实现为”弹力“，而是作为弱几何约束来实现。”-
浏览 3提问于2013-06-28得票数 3
回答已采纳
2回答
如何在D3中控制强制有向图的退回条目？
d3.js、data-visualization、force-layout、graph-visualization
我已经能够使用Force布局构建一个Force Directed Graph。大多数功能都很好用，但我遇到的一个大问题是，在开始布局时，它会在页面上反弹(进出画布边界)，然后才能定位到它在画布上的位置。
我尝试过使用alpha来控制它，但似乎不起作用：
// Create a force layout and bind Nodes and Links
var force = d3.layout.force()
.charge(-1000)
.nodes(nodeSet)
.links(linkSet)
.size(
浏览 3提问于2013-06-23得票数 7
2回答
如何避免在graphviz中重叠节点？
graphviz、dot、neato、image-graphviz
我正在试着画一个有很多节点和边的图。
但是，该图变得过于笨拙，节点和边重叠。我尝试了(不成功)，以下，所有这些或它们的组合。
size = "12.0, 20.0!";
margin = 0.0;
len = 1.0;
我正在使用neato生成png文件。
尺寸规范似乎甚至都不起作用。
任何建议都将不胜感激。
浏览 3提问于2012-11-19得票数 16
回答已采纳
1回答
我应该如何格式化我的JSON并解释一些基本的d3图形节点链接？
javascript、d3.js、graph、force-layout
我希望使用D3.js将来自此JSON的数据表示为节点链接。我是JavaScript和D3.js的新手。我有3种类型的数据，我想在这3种数据之间建立一个层次结构。“父母”>“来源”>“孩子”，我想把每一位家长放在源头之上，把每一位家长都链接到源头上，每个孩子都应该在源头下面，并将他们链接到源头上：
script.js
var width = 960,
height = 500;
// i don't really understand what this does
// except the .linkDistance - gives the di
浏览 2提问于2017-08-10得票数 1
回答已采纳
3回答
如何提高networkx.spring_layout的节点间距
python、graph、networkx、graph-drawing
绘制团图
import networkx as nx
....
nx.draw(G, layout=nx.spring_layout(G))
产生以下图片：
显然，需要增加节点之间的间距(例如，边缘长度)。我在谷歌上搜索过这个，在这里找到了：
对于一些布局算法，有一个scale参数可能会有所帮助。例如：
将网络导入为nx = nx.path_graph(4) pos = nx.spring_layout(G) #默认为scale=1 nx.draw(G，pos) pos = nx.spring_layout(G，scale=2) #所有节点之间的双距离nx.draw(G，pos)
浏览 5提问于2013-01-11得票数 53
回答已采纳
1回答
将节点放置在胞景中父节点的边界上。
cytoscape.js
我想把子节点放在父节点的边框上(如果可能的话，均匀分布)，而不是放在父节点内。
能否做到这一点？假设我能以某种方式得到父母的位置和大小，并以此为基础设置孩子的位置？不过，我还是希望边越短越好，当我添加更多的节点和边时，试图设置自己的坐标就会变得一团糟，所以如果布局算法能够完成节点的分配工作，只希望它们移到边框上就最好了。
<style>
body {
font-family: helvetica;
font-size: 14px;
}
#cy {
width: 100%;
height
浏览 2提问于2016-08-30得票数 0
回答已采纳
1回答
d3力布局为直线(y坐标保持不变)
javascript、d3.js、force-layout
我试图在d3中画出我认为相当于力的图，但画成一条平行线。我想要大约4-5个不同大小的点，取决于它们的大小，它们之间的间隔是均匀的(不是中间的，而是圆圈两侧之间的距离应该是恒定的)，以及连接它们的线。所以在ASCII格式中，类似于：
o---O---o---O
我试图避免复杂的计算，以求出每条线的中心坐标以及开始和结束，所以看起来力的布局可能会起作用。不幸的是，当我把它放在一起，我似乎不能让它很好地工作。通常情况下，点在其他点之后结束，所以对于上面这样的4个节点图，它看起来更像：
O---O
有没有办法使力的布局工作在一维而不是2？还是我被困在做所有的间隔计算？下面是我正在使用的代码：
var
浏览 0提问于2014-11-15得票数 1
回答已采纳
1回答
重叠排斥球的非实时模拟
c++、simulations、cuda
我想做一个非实时的模拟重叠排斥球，最初在2D和后来在3D。与“非真实”，我的意思是，渲染是不需要后，每一个时间步骤。
首先，考虑一个简单的封闭域。在实践中，域将是复杂和不规则的，但始终是封闭的。
边界上的球是固定的，可能是重叠的。一个固定的球复制自己，以产生一个相同大小的自由球，只要没有其他球重叠。固定球和自由球互相排斥，但固定球不能移动。请注意，复制球应该足够倾斜，以启动排斥。在弹性碰撞球的情况下，两个球碰撞后会以一定的速度改变方向，但在这种情况下，球一旦停止重叠，就会很快停止。自由球运动，直到没有运动，或者说我们解决运动问题，直到收敛。然后，每个固定球再次产生一个自由球，这一过程继续进行，
浏览 0提问于2016-03-24得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
