如何调整表格单元格内的svg高度？

Question

第一次使用 jsfiddle 不太成功 - jsfiddle.net/mic1/o9f18aLz/1/（在这里感谢指针）

我需要在一个容器中垂直放置最多 5 个图表，其中有多少图表直到运行时才知道。我认为表格/行/单元格/div 结构将是灵活的（有更好的设计吗？）

<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;

}

一旦我有了数据集 - 3 个图表，每个图表的高度为 33.3%，每个图表的 svg 应该填充每个表格行单元格的高度。我在这里设置了一个虚假的 20px。100 + % 似乎将它设置为顶级父 div 的 100%，所以想知道我应该在这里操作什么。我确实有被调用函数中可用的 d（例如 33.3）百分比。

Answer 1

哦，这是一团糟！

首先要知道的是，SVG 并未设置为表格的高度，而是设置为 150px，如果您未设置有效高度，则这是 SVG 的“默认”高度。您设置为百分比的所有值都被视为无效。

通常，如果（当且仅当）父元素具有定义的高度，则使用百分比值设置元素的高度是有效的。由于您正在设置<td>和<tr>元素的高度，这应该很简单——但事实并非如此。

CSS 高度和宽度属性在表格中的工作方式不同。 您height在行和单元格上使用属性设置的高度实际上被视为行的最小高度，并且单元格的高度始终取决于其子项所需的高度。换句话说，单元格从来没有固定的高度，因此它的孩子的百分比高度永远没有意义。

在代码片段中，我重新安排了您的代码以创建表格的多个版本，每个版本都具有不同的 SVG 高度设置。如您所见，100%、33% 和 null 值都会导致 SVG 设置为 150px 高，并且表格会拉伸以适应：

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>

所以，你可以做什么？

1. 不要使用表格。只有当您有多个列并且您希望每列中的元素排列整齐时，表格才真正有用。如果您只想拥有一列，则可以使用<div>元素。

2. 如果您确实需要表格结构，请通过访问父 div 的高度，然后应用您的百分比，并减去边框和填充来自己计算 SVG 元素的高度。