javascript - 让 d3 矩形跨越整行

Question

目标是有一个显示元素名称和元素百分比的表格。我想放入一个动画背景颜色，以直观地显示这个 %。因此，如果 % 为 25，则表格行的 25% 将填充颜色。到目前为止，这就是我所拥有的。我决定制作一个额外的 td 来容纳将与前两个重叠的矩形。

cshtml(在引导模式中):

            <script>
                var modelThing = @Html.Raw(Json.Encode(Model.Things));
            </script>
            <table id="tableThing">
                <tr>
                    <th>Name</th>
                    <th>%</th>
                </tr>
            </table>

js:

var t = $("table#tableThing");

$.each(modelThing , function (i, thing) {

    t.append('<tr style="position: relative"><td>' + thing.Name + '</td><td>' + thing.Percentage + '</td><td style="position: absolute; padding:0px; left:0px; width:100%;">' + '<div id="thingPlacer' + thing.Id + '"/>' + '</td></tr>')
    t.attr("class", "table table-hover")

    $("#thingsModal").on('show.bs.modal', function () {

        d3.select("#thingPlacer" + thing.Id).selectAll('svg').remove();

        var svg = d3.select("#thingPlacer" + thing.Id).append('svg')
            .attr('width', "100%")
            .attr('height', "100%")
            .append('rect')
            .attr("width", 0)
            .attr('fill', "rgba(200,0,0,0.15)")
            .transition().duration(1000).ease("linear")
            .attr('width', thing.Percentage + "%")
            .attr('height', "100%");
    });

});

这种方式的问题在于，d3 制作的 SVG 将其高度设置为默认的 150px(因为高度设置为 100%)。这从一排流血到它下面的三个。我需要找到一种方法，使矩形与行的高度相同，或者使表格单元格与行的高度相同并关闭溢出，或者制作两行并让行重叠。有没有办法让包含单元格的 div 与前两个 td 的高度相匹配？还是我应该采用另一种方法来解决这个问题？

我想尝试坚持使用 d3，因为它们的其他图表和图形可能会在某些时候取代普通矩形。

编辑

通过添加以下内容，我能够让单元格使用正确的高度:

    var rowInfo;
    rowInfo = $("tr");

然后将高度属性更改为:

.attr('height', rowInfo.height())

但是，这不会在切换到移动设备或更改屏幕尺寸时更新尺寸。

Answer 1

请看以下内容:

How to make <div> fill <td> height

如果您选择“hack”路线，请尝试将包含 tr 的最小高度设置为 1px，以便为 css 提供一些工作空间。否则，您可以根据父 tr 的高度在渲染时计算高度。

[编辑]

可以通过附加到窗口调整大小方法来说明计算高度时的大小变化。对于这种情况，我的标准 MO 是将代码中的 resize 方法重构为可以从该方法调用的东西，然后从 $(window).resize 中调用它:

$(window).resize(function(e) {
    resizeSVG();
    });

resizeSVG(); 将是您的重构方法:选择 svg，获取新的行高，然后按照您在当前绘制代码中的设置设置高度属性。如果需要，我会整理一个小代码示例。

如果缩放成为一个问题(容器的宽度和高度可能无法调整呈现的 svg 的大小)，您可能希望在 svg 上包含 viewBox 属性以控制图像增长时的大小比例。您可以使用 .attr() 将 viewBox 属性添加到您绘制的 svg 中。

Scaling SVG using CSS

Applying SVG scaling with d3