Svg Height With D3.js

I got a little problem, i got actually many tree's who are aligned side by side horizontaly, the problem is when the three's have a different height, they are not aligned horizonta

Solution 1:

I used simple CSS and removed .attr("id", "div").attr("width", 1920) which doesn't do anything anyway.

Here's the CSS I tried:

div#div {
  width: 1920px;
}
div#div svg {
 float: left;
}

Plunkr: http://plnkr.co/edit/Pgqbn4eIECncuqhBVp6U?p=preview

Note: I'm not a fan of assigning HTML element tag names as IDs and so I think an ID other than div would be a better option. It's your choice after all.

Solution 2:

I found the following solution

var cell;
var div = d3.select("body").append("div")
    .attr("id", "div")
    .attr("width", 1920);
cell = div.append("div").attr("class", "cell")
var svg = cell.append("svg")
    .attr("id", "svg")
    .attr("width", 600) // + margin.left + margin.right)
    .append("g")
    .attr("transform", "translate(30,30)");
cell = div.append("div").attr("class", "cell")
var svg2 = cell.append("svg")
    .attr("id", "svg2")
    .attr("width", 600) // + margin.left + margin.right)
    .append("g")
    .attr("transform", "translate(30,30)");
cell = div.append("div").attr("class", "cell")
var svg3 = cell.append("svg")
    .attr("id", "svg3")
    .attr("width", 600) // + margin.left + margin.right)
    .append("g")
    .attr("transform", "translate(30 30)");

And a bit of CSS

#div { display: table-row; }
#div.cell { display: table-cell; vertical-align: top;}

Your code will not run because root is undefined and you can't get links from it.