Javascript 如何在div容器中居中放置svg_Javascript_Html_Css_D3.js_Svg

Javascript 如何在div容器中居中放置svg

javascript html css d3.js svg

Javascript 如何在div容器中居中放置svg,javascript,html,css,d3.js,svg,Javascript,Html,Css,D3.js,Svg,我知道这个问题已经被问了很多次了。我尝试了其中一些答案，但没有成功。将svg元素放在div中居中的最佳方式是什么 <html> <head> <script src="http://d3js.org/d3.v3.min.js" ></script> </head> <body> <div id='canvas'></div> <script> var data = [

我知道这个问题已经被问了很多次了。我尝试了其中一些答案，但没有成功。将svg元素放在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>


var数据=[10,50,80]；
var r=300；
var color=d3.scale.ordinal（）
.范围（[‘红色’、‘蓝色’、‘橙色’）；
var canvas=d3.select（'#canvas'）.append（'svg'））
.attr（'width'，700）
.attr（'height'，600）；
var group=canvas.append（'g'）
.attr（'transform'、'translate（300300）'）；
var arc=d3.svg.arc（）
.内半径（200）
.外层（r）；
var pie=d3.layout.pie（）
.价值（功能（d）{
返回d；
});
var arcs=group.selectAll（“.arc”）
.数据（pie（数据））
.输入（）
.append（'g'）
.attr（“类”、“弧”）；
arcs.append（'路径'）
.attr（'d'，弧）
.attr（'fill'，函数（d）{
返回颜色（d.data）；
});
arcs.append（'text'）
.attr（'transform'，函数（d）{
返回“translate”（'+弧形心（d）+'）；
})
.attr（'text-anchor'，'middle'）
.attr（'font-size'，'1.5em'）
.文本（功能（d）{
返回数据；
});

我想把甜甜圈图表放在中间

您可以向SVG元素添加两行css。您可以将其内联或放在单独的样式表中。只要确保它能装载

svg{
    display: block;
    margin: auto;
}

这将使SVG与div的中心对齐。

只需将居中样式添加到div中即可

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

它会起作用的

你们尝试了什么，它是如何不起作用的？我尝试了你们的解决方案，但我不认为它完全在中心对齐。它看起来向左移动了一点