How to adjust svg height within table cell? - d3.js

Question

First time using jsfiddle not too successful - jsfiddle.net/mic1/o9f18aLz/1/ (appreciate pointers here)
I need to place up to 5 charts vertically within a container where how many charts is not known until runtime. I decided a table/row/cell/div structure would be flexible ( is there a better design?)
<style type="text/css">
.element {
width: 120px;
height: 200px;
box-shadow: 0px 0px 12px rgba(0,255,255,0.5);
border: 1px solid rgba(127,255,255,0.25);
text-align: center;
cursor: default;
}
}
.tile-table {
/*table-layout:fixed;*/
width: 100%;
height: 100%;
border: 3px solid orange;
}
</style>
var tableSet1 = [ 33.3, 33.3, 33.3 ];
var div1 = d3.select("body").append("div")
.classed("element", true)
.append("table")
.classed("tile-table", true)
.selectAll("tr")
.data(tableSet1)
.enter()
.append("tr")
.style("height", function(d) {return d + '%'})
.style("background-color", "yellow")
.append("td")
.style("height", function(d) {return d + '%'})
.append(function(d) {return createChart1(d)});
function createChart1(d) {
var topChart = document.createElement( 'div' );
var svg = d3.select(topChart)
.append("svg")
.style("background-color", "lime")
.attr("height", function() {
return 20}) // using d or 100 + '% no good
.attr('width', function() {
return 100 +'%'});
return topChart;
}
Once I have the dataset - 3 charts at 33.3% height each, the svg for each chart should fill the height of each table row cell. I have it set at a bogus 20px here. 100 + % seems to set it to 100% of the top parent div, so would like to know what I should be manipulating here. I do have the percentage as d (e.g. 33.3) available in the called function.

Answer 1

Oh, this is a mess!
The first thing to know is that the SVG's aren't being set to the height of the table, they are being set to 150px, which is the "default" height for SVG if you don't set a valid height. All the values you are setting as percents are being treated as invalid.
Normally, setting an element's height using a percentage value would be valid iff (if and only if) the parent element has a defined height. Since you're setting the height of the <td> and <tr> elements, that should be straightforward -- but it's not.
CSS height and width properties work differently inside tables. The heights you set with the height property on the row and cell are actually treated as minimum heights for the row, and the cell's height is always dependent on the height required for its children. In other words, the cell never has a fixed height, and therefore percentage heights for its children never have meaning.
In the snippet, I've re-arranged your code to create multiple versions of the table, each with different settings for the SVG height. As you can see, 100%, 33% and null values all result in the SVGs being set to 150px tall, and the tables stretching to fit:
var tableSet1 = [ 33.3, 33.3, 33.3 ];
var div1 = d3.select("body").selectAll("div")
.data(["100%", "33%", "30px", null])
.enter().append("div")
.classed("element", true)
.each(function(option){
d3.select(this)
.append("table")
.classed("tile-table", true)
.selectAll("tr")
.data(tableSet1)
.enter()
.append("tr")
.style("height", function(d) {return d + '%'})
.style("background-color", "gray")
.append("td")
//.style("height", function(d) {return 100 + '%'})
.append(function(d) {return createChart1(d, option)});
});
function createChart1(d, option) {
var topChart = document.createElement( 'div' );
var svg = d3.select(topChart)
.append("svg")
.style("background-color", "seagreen")
.attr("height", function() {
return option})
.attr('width', function() {
return 100 +'%'});
return topChart;
}
.element {
width: 60px;
height: 200px;
box-shadow: 0px 0px 20px rgba(0,155,255,0.75);
border: 1px solid rgba(127,255,255,0.25);
text-align: center;
cursor: default;
display:inline-block;
margin:0 10px;
}
.tile-table {
/*table-layout:fixed;*/
width: 100%;
height: 100%;
border: 3px solid orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
So, what can you do?
Don't use tables. Tables are really only useful when you have multiple columns, and you want elements in each column to line up nicely. If you're just going to have one column, you can use <div> elements.
If you do really need a table structure, calculate the height of the SVG elements yourself by accessing the height of the parent div and then applying your percentage, and subtracting for borders and padding.