CODEWITHSUNDEEP
d3.jsdendrogram
GeoGyro
GeoGyro

Reputation: 559

d3.js - Dendrogram display adjusted to the tree diagram

With d3.js I have created d3 dendrograms to visualize hierachicals relations between objects. Dimensions and margins of the graph are defined with fixed height and width values.

var width = 1000,
    height = 800,
    boxWidth = 150,
    boxHeight = 35,
    gap = {
        width: 50,
        height: 12
    },
    margin = {
        top: 16,
        right: 16,
        bottom: 16,
        left: 16
    },
    svg;

With a few relations, display is ok but with many relations it's doesn't fit, graph is 'cut' and I can't see the entire graph. How to set this width and height properties dynamically and adjusted to the size of the graph ?

An example with a correct display : Codepen good_display

An example with an incorrect display : Codepen bad_display

Upvotes: 0

Views: 359

Answers (1)

NuLo
NuLo

Reputation: 1528

Let's work this out, you need to know the bounding box of your content first and then adjust the svg size. To do that, in this particular case, you only have to look at the boxes or nodes and can ignore the links.

With that in mind you can do the following after populating the Nodes in your renderRelationshipGraph function and return the calculated value:


function renderRelationshipGraph(data) {

    // ...

    var bbox = Nodes.reduce(function (max, d)
    {
      var w = d.x + boxWidth;
      var h = d.y + boxHeight;
      if (w > max[0]) {max[0] = w}
      if (h > max[1]) {max[1] = h}
      
      return max                               
    }, [0,0])

    return bbox
}

then on the main code change use it to update height and width of the svg:

svg = d3.select("#tree").append("svg")
    .attr("width", width)
    .attr("height", height);
    
    svg.append("g");
    
    var bbox = renderRelationshipGraph(data);
      svg.attr("width", bbox[0])
      .attr("height", bbox[1]);

You can add a transition and limit the height but this does what you requested with a really large end result.

Upvotes: 1

Related Questions