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＆amp; 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>

d3 bootstrap，响应中心svg

2 个答案: