如何修复 SVG 与其容器 div 之间的差异

Question

我正在从事数据科学仪表板项目，但在微调某些容器间距时遇到了问题。我关闭了大部分页面功能以缩小问题的范围。我正在尝试在 960x600 主容器中实现 4 个均匀间隔的 div 容器，但是，带有子容器的右下角 div 不断偏离对齐。我确信有一种方法可以使用 HTML 和 CSS 优雅地做到这一点，但是来自 Python 的背景我无法缩小根本原因。现在，在经过昨天的努力之后，我觉得是时候举手寻求帮助了。//HTML        <div class="container shared" id="Time-Series">            <div class="sub-container" id="random-walk">                <h1>Random Walk</h1>                <p id="D1-values">D1 Values</p>            </div>            <div class="sub-container" id="histogram">                <h1>Normal vs Cauchy Sampling</h1>                <p id="D2-values">D2 Values</p>            </div>            <div class="sub-container" id="cumulative">                <h1>Random Accumulation</h1>                <p id="D3-values">D3 Values</p>            </div>            <script src="/rand.js"></script>        </div>//Javascriptconst randomContainer = document.getElementById('Time-Series');const subcanvusheight = randomContainer.offsetHeight;const subcanvuswidth = randomContainer.offsetWidth;const thirds = subcanvusheight / 3;function renderCanvus(containerDiv) {    // General function to render copies of canvas    const canvusObj = d3        .select(containerDiv)        .append('svg')        .attr('width', '100%')        .attr('height', `${thirds}`)        .attr('id', 'Random-chart');    return canvusObj;}画布是使用 D3 模块在 javascript 文件中创建的。然而，无论出于何种原因，在渲染路径的某处，大约 10px 被添加到每个抛出整个网格的底部。我已尽力在我的代码和 chrome 开发控制台中搜索出 10px，但还没有找到任何提示。我也试过重置 css 没有效果。如果有人对为什么会发生这种情况以及如何解决它有任何建议，我们将不胜感激。//CSS* { box-sizing: border-box }.main-container {    width: 960px;    height: 600px;    display: grid;    grid-template-columns: repeat(2, 1fr);    grid-template-rows: repeat(2, 1fr);    grid-gap: 10px;    margin: 0;    padding: 0;}.container {    position: relative;    border: 3px solid black;    display: flex;    margin: 0;    padding: 0;}.shared {    display: flex;    border: none;    height: auto;    flex-direction: column;    align-items: stretch;    justify-content: space-evenly;}

Answer 1

只需添加display: block;到您的 svg（因为 d3 生成它），那个微小的空白就会消失。所以在你的函数中，这样做：

function renderCanvus(containerDiv) {

    // General function to render copies of canvas

    const canvusObj = d3

        .select(containerDiv)

        .append('svg')

        .attr('width', '100%')

        .attr('height', `${thirds}`)

        .attr('style', 'display: block')

        .attr('id', 'Random-chart');

    return canvusObj;

}