繁体   English   中英

在d3强制布局中将节点放置在屏幕中央

Placing the nodes in the center of screen in d3 force layout

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

如何在d3.js中将节点放置在力布局的中心。 我在这里获取JSON数据,就像这样

"nodes": [{
    "cName": "User",
    "cImage_url": "/final/images/component_icons/user_image.png",
    "x": 49.99999999999999,
    "y": 150,
    "fixed": true
}, {
    "cType": "Oracle WebLogic",
    "cName": "weblogic177:7001",
    "cImage_url": "/final/images/Light/component_icons/APPLICATION_SERVERS.png",
    "x": 167,
    "y": 150,
    "fixed": true,
    "AlarmPopup": "WebLogic_server:weblogic177:7001",
    "cStateImage_url": "/final/images/Light/state20_INTERMEDIATE.png",
    "linktoLayermodel": "/final/monitor/EgDispLayers.jsp?site=egurkha.physical.topology&qctr=0&host=weblogic177:7001&comptype=Oracle WebLogic&comeFrom=topology&To=layerMode&isFromZone=null&iszoneName=&parentZone=null&tab=LayerModel&toDashBoardLayer=true"
}, {
    "cType": "Group",
    "cName": "hari11",
    "cImage_url": "/final/images/component_icons/group.png",
    "x": 283.99999999999994,
    "y": 49.99999999999999,
    "fixed": true,
    "AlarmPopup": "Group:hari11:NULL",
    "cStateImage_url": "/final/images/Light/state20_LOW.png",
    "linktoLayermodel": "/final/monitor/EgDisplayGroups.jsp?ptype=group&showsitesegments=false&group=hari11&serverType=Group&site=egurkha.physical.topology&segmentName=sample&fromHomepage=true"
}..

所以节点总是从屏幕的左上角开始,但是我需要从中心开始。 在此处输入图片说明

那么如何处理JSON数据中现有的x,y?

在此处输入图片说明

1 个回复

正是拉斯所说的。

force.on("tick", function() {
    nodes[0].x = w / 2;
    nodes[0].y = h / 2;}

这会将第一个节点放在屏幕中间(nodes [0]表示第一个节点),如果您希望所有节点向右移动,请执行以下操作:

var movement = 200;

    node.attr("transform", function(d)
    { 
    return "translate(" + movement + "," + 0 + ")"; }); //Here you move the nodes
        ;

这基本上遍历了节点,并且每个节点都向右移动了200px。 我对链接做了同样的事情:

link.attr("transform", function(d)
        { 
        return "translate(" + movement + "," + 0 + ")"; }); //Here you move the links
            ;

更新的JSFiddle: http : //jsfiddle.net/aVhd8/159/

1 D3强制布局,其中较大的节点聚集在中心

我一直在修改将用于标签云的力布局,并且每个标签由<circle>表示,其半径与该标签的问题成比例。 我的问题是确定如何使更受欢迎的标签趋向集群的中心,而使不那么受欢迎的标签聚集在标签云的边缘周围。 到目前为止,我的代码如下所示: 为了让您大致了解要处理的数据量,目前有52 ...

2 Circle包作为D3力布局的节点

这是jsfiddle : 如果你有两个政党,你想要在多个投票单位或类似的结构化数据中提出选举结果,这真的很好。 但是,我需要在视觉上代表这一点:( 5个政党而不是2个) (请忽略除“席位”之外的所有原始内容;只有“席位”应该是可视化的) 我想在每个force layout ...

3 d3强制以组为“节点”的布局

我想在d3.js中创建一个强制布局,其中的“节点”是svg组而不是单个svg形状。 例如,假设一个g包含一条直线上连接的点的集合:我希望使用力布局来驱动这些线在屏幕上的放置,而不会影响这些线上的单个点的放置。 这可能吗? 如果是这样,我将如何实现。 如果没有,为什么? ...

4 d3 以可预测的顺序强制布局节点

每当您刷新此示例时,节点的顺序就会不同。 你怎么能让每次刷新时顺序都一样? 也许“子节点 1”在顶部,然后与右侧相邻的是“子节点 2”,以此类推。 除此之外,这个例子适用于我需要实现的目标。 下面的解决方案似乎需要将节点固定到 x,y 点。 但是这样做似乎消除了拖动功能(节点需要能够被拖动到不同的 ...

5 在d3中计算力布局中节点的深度

我正在使用d3.js进行可折叠布局。参考以下代码,我想通过使用depth属性来计算被单击节点的深度(水平),但是我得到的是未定义的。 还有另一种计算深度的方法吗? ...

2015-08-31 09:49:12 1 850   d3.js
6 D3强制布局中的颜色节点

我是D3新手,正在寻求有关如何为D3 Force布局中的命名节点上色的帮助。 在下面的代码中,节点数被定义为200,并且子类首先被命名为"p"和"o" 。 然后makeData函数将200个节点随机分配给"p"或"o" 。 我想更改随机的assignmnet。 在makeData函 ...

7 在d3强制布局中移动固定节点

我正在使用D3的强制布局来显示图形。 现在,我要求单击任何节点时,节点都必须更改其位置。 我查找了其他与StackOverflow相关的问题,但这并没有帮助我。 渲染代码如下: 节点单击处理程序的代码如下所示: 但是,节点位置不会更新。 ...

8 更新d3强制布局中的现有节点

我使用d3创建了一个力布局,效果很好。 我的初始数据是从json文件加载的,并且使用与此d3.js示例类似的技术绘制图表: 现在图表在屏幕上,我需要通过Web套接字从我收到的数据中动态添加,更新和删除节点。 我添加和删除方法工作,但我找不到更新现有节点属性的正确方法。 从我所进 ...

9 d3强制布局-定位节点

我目前正在使用D3.js,它是力图布局。 我正在努力使节点正确放置,它们似乎重叠,我想在每个子节点之间保持清晰的距离。 我有一个示例,说明我当前正在进行的代码的样子(直接从d3示例中直接获取,但半径较大) https://jsbin.com/pajopizawi/edit?html ...

10 在D3 Force布局中合并节点

我不确定是否可以做到,但是从逻辑上来说,我已经编程了功能。 我正在尝试使用户可以选择多个节点,然后单击“ merge按钮,所有这些节点都将被合并(合并到名为MergedNode#的新节点中)。 这个新节点将继承所有合并节点的所有链接。 该节点还应该能够unmerge ,这将破坏Merged ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM