2

我正在创建一个主要使用 D3.js 的甘特图（链接到功能示例）。甘特图有垂直网格线来分隔每一天的列（下图中右侧的列），整体table有水平网格线来分隔每一行/项目。以下是生成图表的示例：

生成的甘特图示例

为了大幅减少创建的元素数量并提高性能，而不是为每个项目/日期地址创建一个表格单元格（这将创建#rows * #days元素），我选择使用绝对定位div在每天的标题单元格。例如，在图片中，每个30单元格都有一个绝对定位，我手动将其高度设置为表格的整个高度。图表的结构是这样的：311div

<table>
    <tr><td colspan="5"></td><td>2012-12-30 to ...</td> ... </tr>
    <tr>
        <td></td>
        <td>Est. Duration</td>
        <td>% Completed</td>
        <td>Est. Start Date</td>
        <td>Est. End Date</td>
        <td class="day-cell">
            <div class="inner">
                <div class="background" style="height: 260px;">30</div>
            </div>
        </td>
        <td class="day-cell">
            <div class="inner">
                <div class="background" style="height: 260px;">31</div>
            </div>
        </td>
        <td class="day-cell">
            <div class="inner">
                <div class="background" style="height: 260px;">1</div>
            </div>
        </td>
        ...
    </tr>
    <tr class="project-row">...</tr>
    <tr class="project-row">...</tr>
    ...
</table>

除了必须手动设置高度的最后一个警告之外，这非常有效。理想情况下，我希望能够参考整个表本身的高度来设置高度div.background，100%而不必使用 JavaScript，尽管如果绝对有必要/不可能避免，我会承认。一旦您开始添加或删除项目行，这个问题是最相关/最明显的（为了模拟这一点，我只是降低了下div图中 's 的高度）：

不正确的网格线

上面代码中类的相关样式有：

  • div.inner-position: relative; width: 19px
  • div.background-position: absolute; top: -1px; left: -1px; right -1px; line-height: 24px

同样，这是图表的 HTML 和 CSS (JSBin) 的功能示例。到目前为止，我对解决方案的尝试包括设置positiontotable和relative各种类似的东西。我什至考虑过将高度设置为荒谬的东西9999px并overflow-y: hidden放在桌子上，但如果有的话，我更喜欢更清洁的解决方案。

哇，这是一个非常简单的解决方案，我希望我能简单地考虑一下。

将 设置table为position: relative，从 中删除定位.inner，然后简单地从中删除top、left和right样式.background并对其进行设置即可使其height: 100%正确定位。

我猜原因是，如果你绝对定位一个元素，默认情况下它会位于它本来应该是静态定位的位置。因此，我可以div通过不摆弄top, left, or right（使其位于单元格中的正确位置），然后将 to 设置height为100%（现在相对于table's 的高度），将其置于正确的位置，并设置width.div

4

1 回答 1

1

哇，这是一个非常简单的解决方案，我希望我能简单地考虑一下。

将 设置table为position: relative，从 中删除定位.inner，然后简单地从中删除top、left和right样式.background并对其进行设置即可使其height: 100%正确定位。

我猜原因是，如果你绝对定位一个元素，默认情况下它会位于它本来应该是静态定位的位置。因此，我div只需不摆弄top, left, or right（使其位于单元格中的正确位置），然后将 to 设置height为100%（现在相对于table's 的高度），就可以将其置于正确的位置，并设置width.div

于 2013-05-11T07:55:41.860 回答