Question

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

我需要在一个容器中垂直放置最多5个图表，直到运行时才能知道多少个图表。我决定一个table / row / cell / 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;

}

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

Answer 1

哦，这太乱了！

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

通常情况下，使用百分比值设置元素的高度iff（当且仅当）父元素具有已定义的高度时才有效。由于您要设置<td>和<tr>元素的高度，这应该是直截了当的 - 但事实并非如此。

CSS高度和宽度属性在表内的工作方式不同。 The heights you set with the height property on the row and cell are actually treated as minimum heights for the row，单元格的高度始终取决于其子项所需的高度。换句话说，细胞永远不会有固定的高度，因此其子女的百分比高度永远不会有意义。

在代码片段中，我重新安排了代码以创建表格的多个版本，每个版本都有不同的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>

那么，你能做什么？

不要使用表格。只有当您有多个列时，表才真正有用，并且您希望每列中的元素排列良好。如果您只想拥有一列，则可以使用<div>元素。
如果你真的需要一个表格结构，你可以通过访问父div的高度，然后应用你的百分比，减去边框和填充来自己计算SVG元素的高度。

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

1 个答案: