如何使用D3js將圖例添加到餅圖？以及如何集中餅圖？

<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>

我用上面的代碼來生成一個餅圖，但是它總是在顯示頁面的左側，我該如何集中它？此外，當幻燈片很小，文字會擠在一起，所以我怎麼可以添加圖例，而不是顯示每個幻燈片內的文字？如何使用D3js將圖例添加到餅圖？以及如何集中餅圖？

來源

2013-12-19 user3118134

是[this]（http://bl.ocks.org/Guerino1/2295263）你在找什麼？爲了居中，將SVG附加到以div爲中心的類似元素。 –

傳奇只是矩形和你附加到svg的文本。查看vida.io上的人口餅圖模板。它具有傳奇建成圖表：

https://vida.io/documents/gSvr8dAH23eirKQDp

要居中的圖表，改變SVG轉換參數。你現在設置爲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) + ")");

來源

2013-12-19 19:07:14

+10

您已鏈接到的網站需要登錄才能看到代碼示例。鏈接到這樣的網站會使互聯網變得更糟。爲了大家的利益，請使用JSFiddle，bl.ocks.org，CodePen或其他開放網站。 – couchand

這是我跑了的 http://bl.ocks.org/ZJONSSON/3918369 的例子，但你需要d3.legend.js，你應該能夠找到關閉該鏈接。加入它然後做三件事。

1st。添加CSS類傳奇

.legend rect { 
fill:white; 
stroke:black; 
opacity:0.8; }

第二。將attr：data-legend添加到g.append（「path」）

 g.append("path") 
      .attr("d", arc) 
      .attr("data-legend", function(d){return d.data.name}) 
      .style("fill", function (d) { return color(d.data.name); });

3rd。有些地方在這之後繼續往下放這個傢伙

legend = svg.append("g") 
      .attr("class", "legend") 
      .attr("transform", "translate(50,30)") 
      .style("font-size", "12px") 
      .call(d3.legend)

然後，你應該有一個很好的簡單的傳說。如果要將其居中，請在創建圖例時使用翻譯中的值（50,30）。

這就是你應該得到的。 enter image description here

來源

2014-03-07 21:35:05 DeadlyChambers

如何使用D3js將圖例添加到餅圖？以及如何集中餅圖？

回答

相關問題