last day (14 days later) » 

9:14 AM
0
A: Placing the nodes in the center of screen in d3 force layout

AJ_91Exactly what Lars said. force.on("tick", function() { nodes[0].x = w / 2; nodes[0].y = h / 2;} this puts the first node in the middle of the screen (nodes[0] means first node) and if you want all the nodes to move to the right do something like this : nodes.attr("transform", function...

 
do you have a JSFiddle i could check ?
 
but basically force.on("tick", function(d, i) {console.log(i)}); Im getting undefined
force.on("tick", function(d, i) {graph.rootJson.nodes.forEach(function(d, i) { graph.rootJson.nodes[i].x = graph.rootJson.nodes[i].x + options.width; graph.rootJson.nodes[i].y = graph.rootJson.nodes[i].y + options.width; });}) this is working for me but position are not setting properly
 
obviously what i gave you doesnt work. stupid me. that would move the nodes more to the right every frame. Ill updated the answer :) Also, the 'i' wasnt getting found as it was using the 'force' to get the data from not the 'nodes' like i have in the updated answer :)
 
yes you are right.Its not working out in drag and more to the right
 
do you understand how the nodes are being moved now then ? If you do the translate i did in the answer before you call the force.tick() then it should work fine..... i think .....
 
9:14 AM
yes seems nodes and links are moving some where else. As show in the image
 
Ah ok cool, think you need to update the links/edges positions too. So links.attr( ..... Your tick function should handle the new positions of the nodes though. Did you translate the nodes before you call the tick function ?
 
NO , im not translate the nodes before
 
translate them before otherwise the tick function will update the original position data not the updated
 
No AJ_91 is not working out :(
 
try put a simplified version of it on JSFiddle then ill be able to find the problem. Its difficult to tell you what to do when I can't see the code :/
 
9:14 AM
plz chk the link. I think you can do this.:)
 
so all you want is to move the graph to the right ?
 
Yes exactly
 
9:28 AM
updated answer :)
 
Grt Aj_91
 
no problem
 
is it possible to make bounding dragging the node.
:)
i did like this node.attr("cx", function(d) {
return d.x = Math.max(60, Math.min($(window).width() - 60, d.x));
})
.attr("cy", function(d) {
return d.y = Math.max(60, Math.min($(window).height() - 60, d.y));
});
 
function button_drag2(xLower,xHigher,yLower,yHigher){
return d3.behavior.drag()
.origin(function() {
var g = this;
return {x: d3.transform(g.getAttribute("transform")).translate[0],
y: d3.transform(g.getAttribute("transform")).translate[1]};
})
.on("drag", function(d) {

g = this;
translate = d3.transform(g.getAttribute("transform")).translate;

x = d3.event.dx + translate[0],
y = d3.event.dy + translate[1];

if(x<xLower){x=xLower;}
if(x>xHigher){x=xHigher;}
if(y<yLower){y=yLower;}
if(y>yHigher){y=yHigher;}
notice i call nodes.call() and the parameters are the boundaries. This is the drag function
 
9:44 AM
have you updated this too :)
 
no ill try implement it
think you should give it a go to, read the code and try understand it
 
Yes i will try ,Thank you AJ_91:)
 
no problem
that should help
 
 
3 hours later…
1:05 PM
Heres the code for the one you looked at : bl.ocks.org/mbostock/1129492
 

last day (14 days later) »