Menu
I know this question have been asked multiple times on SO. I tried some of those answers but It didn't worked. What is the best way to center the svg element inside div
<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>
I want to put the donut chart in center
D3 Donut Chart
411
To center an SVG horizontally in a div, you can use the margin property. The margin property is used to add space around an element. In this case, you would use it to add space on the left and right side of the SVG, so that it is centered in the div.
It's a property of SVG elements, their node points (viewport and viewbox) are by standard, starting on the top-left and not on the center of the SVG element. So that's why whenever you try to center the vector, it doesn't fit right like images.
You can add couple of css lines to the SVG element. You can inline it or have it in a separate style sheet. Just make sure it loads.
svg{
display: block;
margin: auto;
}
This will align the SVG to the center of the div.
70
Just add centering style to your div.
<div id='canvas' style="text-align:center;"></div>
It will work.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
