D3.js 如何在表格单元格内调整svg高度？

第一次使用jsfiddle不太成功-jsfiddle.net/mic1/o9f18aLz/1/（感谢这里的提示）

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

.元素{
宽度：120px；
高度：200px；
盒影：0px 0px 12px rgba（0255255,0.5）；
边框：1px实心rgba（127255255,0.25）；
文本对齐：居中；
游标：默认值；
}
}
.瓷砖桌子{
/*表布局：固定*/
宽度：100%；
身高：100%；
边框：3倍纯色橙色；
}
var tableSet1=[33.3,33.3,33.3]；
var div1=d3.选择（“主体”）.追加（“div”）
.classed（“元素”，真）
.append（“表格”）
.classed（“瓷砖表”，真）
.selectAll（“tr”）
.数据（表集合1）
.输入（）
.附加（“tr”）
.style（“height”，函数（d）{返回d+'%}）
.style（“背景色”、“黄色”）
.附加（“td”）
.style（“height”，函数（d）{返回d+'%}）
.append（函数（d）{return createChart1（d）}）；
函数createChart1（d）{
var topChart=document.createElement（'div'）；
var svg=d3.选择（topChart）
.append（“svg”）
.style（“背景色”、“石灰色”）
.attr（“高度”，函数（）{
返回20}）//使用d或100+'%no good
.attr（'width'，function（）{
返回100+'%'}）；
返回顶部图表；

}

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

哦，这真是一团糟

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

通常，当父元素具有定义的高度时（如果且仅当父元素具有定义的高度时），使用百分比值设置元素的高度是有效的。因为您正在设置

和

元素的高度，所以这应该很简单，但事实并非如此

CSS高度和宽度属性在表中的工作方式不同，细胞的高度始终取决于其子细胞所需的高度。换句话说，单元格从来没有固定的高度，因此其子单元格的百分比高度永远没有意义

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

var表集1=[33.3,33.3,33.3]；
var div1=d3.选择（“主体”）.选择全部（“div”）
.数据（[“100%，“33%，“30px”，空]）
.enter（）.append（“div”）
.classed（“元素”，真）
.每个（功能（选项）{
d3.选择（本）
.append（“表格”）
.classed（“瓷砖表”，真）
.selectAll（“tr”）
.数据（表集合1）
.输入（）
.附加（“tr”）
.style（“height”，函数（d）{返回d+'%}）
.style（“背景色”、“灰色”）
.附加（“td”）
//.style（“高度”，函数（d）{return 100+'%}）
.append（函数（d）{return createChart1（d，option）}）；
});
函数createChart1（d，选项）{
var topChart=document.createElement（'div'）；
var svg=d3.选择（topChart）
.append（“svg”）
.style（“背景色”、“海绿”）
.attr（“高度”，函数（）{
返回选项}）
.attr（'width'，function（）{
返回100+'%'}）；
返回顶部图表；
}

.element{
宽度：60px；
高度：200px；
盒影：0px 0px 20px rgba（0155255,0.75）；
边框：1px实心rgba（127255255,0.25）；
文本对齐：居中；
游标：默认值；
显示：内联块；
利润率：0.10px；
}
.瓷砖桌子{
/*表布局：固定*/
宽度：100%；
身高：100%；
边框：3倍纯色橙色；
}

哦，这真是一团糟

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

通常，当父元素具有定义的高度时（如果且仅当父元素具有定义的高度时），使用百分比值设置元素的高度是有效的。因为您正在设置

和

元素的高度，所以这应该很简单，但事实并非如此

CSS高度和宽度属性在表中的工作方式不同，细胞的高度始终取决于其子细胞所需的高度。换句话说，单元格从来没有固定的高度，因此其子单元格的百分比高度永远没有意义

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

var表集1=[33.3,33.3,33.3]；
var div1=d3.选择（“主体”）.选择全部（“div”）
.数据（[“100%，“33%，“30px”，空]）
.enter（）.append（“div”）
.classed（“元素”，真）
.每个（有趣的）
<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;