如何修复 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>

//Javascript

const 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) {&nbsp; &nbsp; // General function to render copies of canvas&nbsp; &nbsp; const canvusObj = d3&nbsp; &nbsp; &nbsp; &nbsp; .select(containerDiv)&nbsp; &nbsp; &nbsp; &nbsp; .append('svg')&nbsp; &nbsp; &nbsp; &nbsp; .attr('width', '100%')&nbsp; &nbsp; &nbsp; &nbsp; .attr('height', `${thirds}`)&nbsp; &nbsp; &nbsp; &nbsp; .attr('style', 'display: block')&nbsp; &nbsp; &nbsp; &nbsp; .attr('id', 'Random-chart');&nbsp; &nbsp; return canvusObj;}