I'm using force layout with d3js to draw a network graph the problem is that my SVG is truncated (see the image bellow) how to get the whole image ? i'm using this to initialise the chart :

var width = 1200,
        height = 1000,

    var force = d3.layout.force()
        .size([width, height])
        .on("tick", tick)

    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);

    var link = svg.selectAll(".link"),
        node = svg.selectAll(".node");
  • You are asking how to force the nodes to remain in the visible area? – Andrew Reid Apr 11 at 19:38
  • Yes @AndrewReid – Dany M Apr 12 at 6:59

At first simple step i suggest simply to scale the viewport...

var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);
        .attr("viewBox", `${-width/2} ${-height/2} ${width*2} ${height*2}`)

Or you can compute bbox of all nodes and set viewbox more percise

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.