如何將svg集中在div容器中

Question

我知道這個問題已被多次詢問過。 我嘗試了一些這些答案，但它沒有奏效。 將div中的svg元素居中的最佳方法是什么？

<html>

<head>
<script src="http://d3js.org/d3.v3.min.js" ></script>

</head>

<body> 

<div  id='canvas'></div>


<script>

  var data = [10, 50, 80];
var r = 300;

var color = d3.scale.ordinal()
    .range(['red', 'blue', 'orange']);

var canvas = d3.select('#canvas').append('svg')    
    .attr('width', 700)
    .attr('height', 600);

var group = canvas.append('g')
    .attr('transform', 'translate(300, 300)');

var arc = d3.svg.arc()
    .innerRadius(200)
    .outerRadius(r);

var pie = d3.layout.pie()
    .value(function (d) {
    return d;
});

var arcs = group.selectAll('.arc')
    .data(pie(data))
    .enter()
    .append('g')
    .attr('class', 'arc');

arcs.append('path')
    .attr('d', arc)
    .attr('fill', function (d) {
    return color(d.data);
});

arcs.append('text')
    .attr('transform', function (d) {
    return 'translate(' + arc.centroid(d) + ')';
})
    .attr('text-anchor', 'middle')
    .attr('font-size', '1.5em')
    .text(function (d) {
    return d.data;
});

</script>   

</body>



</html>

我想把甜甜圈圖放在中心位置

D3甜甜圈圖表

Answer 1

您可以向SVG元素添加幾條css行。 您可以內聯它或將其放在單獨的樣式表中。 只要確保它加載。

svg{
    display: block;
    margin: auto;
}

這將使SVG與div的中心對齊。

Answer 2

只需為您的div添加居中風格。

<div  id='canvas' style="text-align:center;"></div>

它會工作。

如何將svg集中在div容器中

問題描述

2 個解決方案

解決方案1
8 2015-12-05 06:06:16

解決方案2
0 2015-12-05 11:56:27

如何將svg集中在div容器中

問題描述

2 個解決方案

解決方案1 8 2015-12-05 06:06:16

解決方案2 0 2015-12-05 11:56:27

解決方案1
8 2015-12-05 06:06:16

解決方案2
0 2015-12-05 11:56:27