如何在一個div容器中放置一個svg

我知道這個問題已經在SO上多次提出過。我嘗試了一些答案，但它沒有奏效。什麼是中心內部的div如何在一個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>

svg元素我希望把圓環圖在中心

D3 Donut Chart

來源

2015-12-05 Mahtab Alam

你嘗試了什麼，它是如何工作的？ –

您可以添加幾行CSS的SVG元素的最好方法。您可以將其內聯或將其放在單獨的樣式表中。只要確保它加載。

svg{ 
    display: block; 
    margin: auto; 
}

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

來源

2015-12-05 06:06:16 Fawzan

我試過你的解決方案，但我不認爲它完全對齊在中心。它看起來會向左移一點 –

你可以把代碼放在jsfiddle中嗎？ – Fawzan

只需添加居中風格到你的div。

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

它會工作。

來源

2015-12-05 11:56:27 Fasna

如何在一個div容器中放置一個svg

回答

相關問題