Как центрировать svg в контейнере div

Я знаю, что этот вопрос был задан несколько раз на SO. Я попробовал некоторые из этих ответов, но это не сработало. Что является лучшим способом для центрирования элемента внутри SVG DIVКак центрировать 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>

Я хочу поставить пончик диаграмму в центре

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

Как центрировать svg в контейнере div

ответ

Смежные вопросы