Question

目标是拥有一个显示项目名称和项目％的表格。我想要一个动态的背景颜色，可以直观地显示这个％。因此，如果％为25，则表格行的25％将填充颜色。到目前为止，这就是我所拥有的。我决定制作一个额外的td来保存与前两个重叠的矩形。

cshtml（在bootstrap模式中）：

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

然后将height属性更改为：

.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，获取新的行高，然后在当前绘制代码中设置高度attr。如果需要，我会把一个小代码示例放在一起。

如果缩放成为问题（容器的宽度和高度可能不会调整渲染的svg的大小），您可能希望在svg上包含viewBox属性以控制图像增长时的大小比例。您可以使用.attr（）将viewBox属性添加到绘制的svg。

Scaling SVG using CSS

Applying SVG scaling with d3

让d3矩形跨越整行

1 个答案: