d3 bootstrap，响应式居中 svg

Question

我有一个 d3 svg，我想保持居中。我试过上课：

.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
}

Answer 2

使用 center-block 帮助类来居中您的 svg。

center-block

设置要显示的元素：通过边距阻止和居中。可作为 mixin 和 class 使用。

还要确保将viewBox 和preserveAspectRatio 属性添加到您的svg 元素。

var margin        = { top: 50, right: 50, bottom: 50, left: 50}, 
    w             = 1024 - margin.left - margin.right,
    h             = 300 - margin.top - margin.bottom,
    circleRadii   = 15,
    triData       = [{x: 120, y: 30}, {x: 250, y: 120}, {x: 340, y: 160}],
    circleData    = [{x: 110, y: 10}, {x: 140, y: 80}, {x: 460, y: 70}];

var svg = d3.select("#graph")
.attr("width", w + margin.left + margin.right)
.attr("height", h + margin.left + margin.right)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var tri =  svg.selectAll(".point")
.data(triData)
.enter().append("path")
.attr("class", "point")
.attr("stroke", "none")
.attr("fill", "rgba(30,110,160,.5)")
.attr("d", d3.svg.symbol().type("triangle-up").size(1024*2))
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

var circles = svg.selectAll("circle")
.data(circleData)
.enter()
.append("circle");

var circleAttr = circles
.attr("cx", function (d) { return d.x; })
.attr("cy", function (d) { return d.y; })
.attr("r", circleRadii)
.style("fill", "rgba(10,100,0,.5)");

svg {
    background: black;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <svg id="graph" class="img-responsive center-block" width="1024" height="300" viewBox="0 0 1024 300" preserveAspectRatio="xMidYMid"></svg>
      <h4 class="text-center">Siblings in College</h4>
    </div>
    <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>
    </div>
  </div>