如何在 svg 中将圆环图居中答案

【问题标题】：How do I center a donut chart inside an svg如何在 svg 中将圆环图居中
【发布时间】：2020-07-15 11:16:43
【问题描述】：

我有以下选项卡面板，我想将 svg 元素水平居中。我的 css 适用于第一个 svg 元素（柱形图），但不适用于第三个元素（圆环图）。两者都位于 tab-content 父级内的 div 内，但只有一个正在获取 css 修饰符。如何在它的父 svg 中居中圆环图？ Here 是我正在研究的代码。

CSS：

.tab-content {
  display: flex;
  justify-content: center;
}

HTML：

<div class="tab-content">
    <div role="tabpanel" class="tab-pane fade show active" id="tab1">
      <h3>Column Chart <small>Lorem ipsum</small></h3>
        <svg id="chart1" width="900" height="400"></svg>
    </div>
    <div role="tabpanel" class="tab-pane fade" id="tab2">
      <h3>Treemap <small>Lorem ipsum</small></h3>
        <svg id="chart2" width="900" height="400"></svg>
    </div>
    <div role="tabpanel" class="tab-pane fade" id="tab3">
        <h3>Donut Chart <small>Lorem ipsum</small></h3>
        <svg id="chart3" width="900" height="400"></svg>
    </div>
    <div role="tabpanel" class="tab-pane fade" id="tab4">
      <h3>Time Series <small>Lorem ipsum</small></h3>
        <svg id="chart4" width="900" height="400"></svg>
    </div>
</div>

【问题讨论】：

标签： javascript html css d3.js

【解决方案1】：

您正在将flex 样式应用到.tab-content，这意味着您正在尝试使.tabpanel 元素居中（在这种情况下，它们扮演弹性项目的角色）。

首先，如果您想在.tabpanel 元素中居中，您应该对其应用弹性盒样式。您可以在此处阅读有关 flex 的更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

其次，您的 SVG 图像很大，但它们实际上并没有占用所有空间。例如，您的甜甜圈图将放置在一个 900x400 的大盒子内，而它只占用左上角的一小块空间。 Flex-box 将使您的孔图像居中，即 900x400 框，但圆环图将位于该大框的左上角。

我的建议是，您应该让 SVG 占据整个图像框，并根据需要对其进行缩放。此外，您可能会发现通过 CSS 控制宽度和高度比使用上面的固定值更容易。

【讨论】：

【解决方案2】：

我可以通过编辑转换为靠近父 svg 中心的转换来使圆环图居中。父 svg 尺寸为 900 x 400。

旧变换：

.attr("transform", "translate(120,120)");

新的变换：

.attr("transform", "translate(450,200)");

【讨论】：