CODEWITHSUNDEEP
javascriptd3.jssvg
illwalkwithyou
illwalkwithyou

Reputation: 359

D3 fit nodes on screen

I have a simple D3 Graph but I am struggling but for some reason the nodes won't stay within the bounds of the svg. I have given them a height and width and when the nodes render they spill outwidth said height and width and are therefore invisble. 

let height = 500; 
let width = 960;

this.svg = d3.select("networkView").append("svg")
    .attr("width", width)
    .attr("height", height);

this.force = d3.layout.force()
    .gravity(.05)
    .charge(-240)
    .linkDistance(50)
    .size([width, height]);

let node = this.svg.selectAll(".node")
    .data(jsonNodes)
    .enter().append("g")
    .attr("class", "node")
    .call(this.force.drag);

node.append("circle")
    .attr("r","10");

node.append("text")
    .attr("dx", 0)
    .attr("dy", "2.5em")
    .text(function(d) { return d.name })
    .call(this.force.drag);

this.force
   .nodes(jsonNodes)
   .start();

this.force.on("tick", function() {
    node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});

Upvotes: 3

Views: 1381

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102194

There is a conceptual misunderstanding here. size() will not restrain your nodes. According to the API, it will simply:

...set the available layout size to the specified two-element array of numbers representing x and y [...] The size affects two aspects of the force-directed layout: the gravitational center, and the initial random position.

A possible solution is using this simple math:

node.attr("transform", function(d) {
    return "translate(" + (d.x = Math.max(0, Math.min(width, d.x))) + "," 
    + (d.y = Math.max(0, Math.min(height, d.y))) + ")"
});

If you want to take into account the radii of your circles (which right now is 10), it becomes:

node.attr("transform", function(d) {
    return "translate(" + (d.x = Math.max(10, Math.min(width - 10, d.x))) + "," 
    + (d.y = Math.max(10, Math.min(height - 10, d.y))) + ")"
});

Upvotes: 2

Related Questions