如何将节点放在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?
答案 0 :(得分:1)
Lars说的正是如此。
force.on("tick", function() {
nodes[0].x = w / 2;
nodes[0].y = h / 2;}
这会将第一个节点置于屏幕中间(节点[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/