javascript - d3 bootstrap，响应式居中 svg

Question

我有一个 d3 svg，我想保持居中。我尝试过开设类(class):

.tocenter {
margin: 0 auto;
}

但是这不起作用。我也尝试过包装 svg在一些divs但我一定做错了什么。有什么建议吗？

包含 svg 图形的 svg(根据窗口调整大小): <svg id="graph" class="img-responsive tocenter"></svg>

代码:

<svg id="graph" class="img-responsive tocenter"></svg>
<h4 class="text-center">Siblings in College</h4>
<div class="col-md-12 text-center">
<button type="button" class="btn btn-default btn-sm" onclick=updateData(0)>No Siblings in College</button>
<button type="button" class="btn btn-default btn-sm" onclick=updateData(1)>1+ Sibling(s) in College</button>
</div>
<div><br /></div>
<h4 class="text-center">Household Income</h4>
<div class="col-md-12 text-center">
<div class="btn-group" data-toggle="buttons">
    <button type="button" class="btn btn-default btn-sm" onclick=updateData2(1)><$30k</button>
    <button type="button" class="btn btn-default btn-sm" onclick=updateData2(2)>$30k-$48k</button>
    <button type="button" class="btn btn-default btn-sm" onclick=updateData2(3)>$48k-$75k</button>
    <button type="button" class="btn btn-default btn-sm" onclick=updateData2(4)>$75k-$110k</button>
    <button type="button" class="btn btn-default btn-sm" onclick=updateData2(5)>$110k-$150k</button>
    <button type="button" class="btn btn-default btn-sm" onclick=updateData2(6)>>$150k</button>
</div>
</div>

Answer 1

我做了JSFiddle 这可能有助于解决您的问题。请注意，我指定了 svg 元素的宽度，以便父容器可以正确地将文本对齐属性添加到 SVG。

HTML 和 CSS:

<div>
  <svg> </svg >
</div>

svg {
  width: *some value*
}

div {
  text-align: center
}