<script type="text/javascript">
var w = 400, //width
h = 400, //height
r = 150, //radius
color = d3.scale.category20c(); //builtin range of colors
data = [
{"label":"Single", "value":<?php echo $PercentageSingle; ?>},
{"label":"In a relationship", "value":<?php echo $PercentageInRe; ?>},
{"label":"Engaged", "value":<?php echo $PercentageEngaged; ?>},
{"label":"Married", "value":<?php echo $PercentageMarried; ?>},
{"label":"In an open relationship", "value":<?php echo $PercentageInOpenRe; ?>},
{"label":"It's complicated", "value":<?php echo $PercentageCom; ?>},
{"label":"Separated", "value":<?php echo $PercentageSeparated; ?>},
{"label":"Divorced", "value":<?php echo $PercentageDivorced; ?>},
{"label":"Widowed", "value":<?php echo $PercentageWidowed; ?>},
{"label":"Unknown", "value":<?php echo $PercentageUnknown; ?>}
];
var vis = d3.select("body")
.append("svg:svg") //create the SVG element inside the <body>
.data([data]) //associate our data with the document
.attr("width", w) //set the width and height of our visualization (these will be attributes of the <svg> tag
.attr("height", h)
.append("svg:g") //make a group to hold our pie chart
.attr("transform", "translate(" + r + "," + r + ")") //move the center of the pie chart from 0, 0 to radius, radius
var arc = d3.svg.arc() //this will create <path> elements for us using arc data
.outerRadius(r);
var pie = d3.layout.pie() //this will create arc data for us given a list of values
.value(function(d) { return d.value; }); //we must tell it out to access the value of each element in our data array
var arcs = vis.selectAll("g.slice") //this selects all <g> elements with class slice (there aren't any yet)
.data(pie) //associate the generated pie data (an array of arcs, each having startAngle, endAngle and value properties)
.enter() //this will create <g> elements for every "extra" data element that should be associated with a selection. The result is creating a <g> for every object in the data array
.append("svg:g") //create a group to hold each slice (we will have a <path> and a <text> element associated with each slice)
.attr("class", "slice"); //allow us to style things in the slices (like text)
arcs.append("svg:path")
.attr("fill", function(d, i) { return color(i); } ) //set the color for each slice to be chosen from the color function defined above
.attr("d", arc); //this creates the actual SVG path using the associated data (pie) with the arc drawing function
arcs.append("svg:text") //add a label to each slice
.attr("transform", function(d) { //set the label's origin to the center of the arc
//we have to make sure to set these before calling arc.centroid
d.innerRadius = 0;
d.outerRadius = r;
return "translate(" + arc.centroid(d) + ")"; //this gives us a pair of coordinates like [50, 50]
})
.attr("text-anchor", "middle") //center the text on it's origin
.text(function(d, i) { return data[i].label; }); //get the label from our original data array
</script>
我使用上面的代码生成饼图,但是在显示时它始终位于网页的左侧,我该如何集中它? 此外,当幻灯片非常小时,文本会挤在一起,那么如何在其中添加图例而不是在每张幻灯片中显示文字?
答案 0 :(得分:11)
这是我跑掉的例子 http://bl.ocks.org/ZJONSSON/3918369 但是您需要 d3.legend.js ,您应该能够找到该链接。添加它然后做三件事。
第一。为图例添加css类
.legend rect {
fill:white;
stroke:black;
opacity:0.8; }
第二。将attr:data-legend添加到g.append(&#34; path&#34;)
g.append("path")
.attr("d", arc)
.attr("data-legend", function(d){return d.data.name})
.style("fill", function (d) { return color(d.data.name); });
第三。一些在此之后继续将这个人放在那里
legend = svg.append("g")
.attr("class", "legend")
.attr("transform", "translate(50,30)")
.style("font-size", "12px")
.call(d3.legend)
然后你应该有一个很好的简单传奇。如果要将其居中,请在创建图例时使用translate中的值(50,30)。
这是你应该最终得到的。
答案 1 :(得分:3)
图例只是你附加到svg的矩形和文字。查看vida.io上的人口饼图模板。它的图例内置于图表中:
https://vida.io/documents/gSvr8dAH23eirKQDp
要使图表居中,请在svg中更改translate参数。你现在把它设置为r。您可以执行类似(宽度/ 2 - r)和(高度/ 2 - r)的操作。
var svg = d3.select("#canvas").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + (width / 2 - r) + "," + (height / 2 - r) + ")");