如何一個不錯的傳說添加到D3餅圖

我有我的餅圖的工作確定，但我想補充一個漂亮的傳說有點像這樣（在MSPAINT製造）如何一個不錯的傳說添加到D3餅圖

但可以「T相當使其工作...

這裏是我的餅圖代碼（沒有傳說中的部分）：

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> 
 
</head> 
 

 
<body> 
 
    <script> 
 
    var newData = [{ 
 
     count: 1, 
 
     emote: "OneTwoThree" 
 
     }, { 
 
     count: 1, 
 
     emote: "FourFiveSix" 
 
     }, { 
 
     count: 1, 
 
     emote: "SevenEightNine" 
 
     }, { 
 
     count: 15, 
 
     emote: "TenElevenTwelve" 
 
     }, 
 

 
    ] 
 

 
    // Define size & radius of donut pie chart 
 
    var width = 450, 
 
     height = 800, 
 
     radius = Math.min(width, height)/2; 
 

 
    // Define arc colours 
 
    var colour = d3.scale.category20(); 
 

 
    // Define arc ranges 
 
    var arcText = d3.scale.ordinal() 
 
     .rangeRoundBands([0, width], .1, .3); 
 

 
    // Determine size of arcs 
 
    var arc = d3.svg.arc() 
 
     .innerRadius(radius - 130) 
 
     .outerRadius(radius - 10); 
 

 
    // Create the donut pie chart layout 
 
    var pie = d3.layout.pie() 
 
     .value(function(d) { 
 
     return d.count; 
 
     }) 
 
     .sort(null); 
 

 
    // Append SVG attributes and append g to the SVG 
 
    var mySvg = d3.select('body').append("svg") 
 
     .attr("width", width) 
 
     .attr("height", height); 
 

 
    var svg = mySvg 
 
     .append("g") 
 
     .attr("transform", "translate(" + radius + "," + radius + ")"); 
 

 
    var svgText = mySvg 
 
     .append("g") 
 
     .attr("transform", "translate(" + radius + "," + radius + ")"); 
 

 
    // Define inner circle 
 
    svg.append("circle") 
 
     .attr("cx", 0) 
 
     .attr("cy", 0) 
 
     .attr("r", 100) 
 
     .attr("fill", "#fff"); 
 

 
    // Calculate SVG paths and fill in the colours 
 
    var g = svg.selectAll(".arc") 
 
     .data(pie(newData)) 
 
     .enter().append("g") 
 
     .attr("class", "arc"); 
 

 
    // Append the path to each g 
 
    g.append("path") 
 
     .attr("d", arc) 
 
     //.attr("data-legend", function(d, i){ return parseInt(newData[i].count) + ' ' + newData[i].emote; }) 
 
     .attr("fill", function(d, i) { 
 
     return colour(i); 
 
     }); 
 

 
    var textG = svg.selectAll(".labels") 
 
     .data(pie(newData)) 
 
     .enter().append("g") 
 
     .attr("class", "labels"); 
 

 
    // Append text labels to each arc 
 
    textG.append("text") 
 
     .attr("transform", function(d) { 
 
     return "translate(" + arc.centroid(d) + ")"; 
 
     }) 
 
     .attr("dy", ".35em") 
 
     .style("text-anchor", "middle") 
 
     .attr("fill", "#fff") 
 
     .text(function(d, i) { 
 
     return d.data.count > 0 ? d.data.emote : ''; 
 
     }); 
 
    </script> 
 
</body> 
 

 
</html>

來源

2015-08-30 ibiza

我很驚訝沒有更多的「股票」這類事情的例子。

這裏是一個匆匆的傳奇，看起來與您的數據很好：

// again rebind for legend 
var legendG = mySvg.selectAll(".legend") // note appending it to mySvg and not svg to make positioning easier 
    .data(pie(newData)) 
    .enter().append("g") 
    .attr("transform", function(d,i){ 
    return "translate(" + (width - 110) + "," + (i * 15 + 20) + ")"; // place each legend on the right and bump each one down 15 pixels 
    }) 
    .attr("class", "legend"); 

legendG.append("rect") // make a matching color rect 
    .attr("width", 10) 
    .attr("height", 10) 
    .attr("fill", function(d, i) { 
    return colour(i); 
    }); 

legendG.append("text") // add the text 
    .text(function(d){ 
    return d.value + " " + d.data.emote; 
    }) 
    .style("font-size", 12) 
    .attr("y", 10) 
    .attr("x", 11);

完整的示例：

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> 
 
</head> 
 

 
<body> 
 
    <script> 
 
    var newData = [{ 
 
     count: 1, 
 
     emote: "OneTwoThree" 
 
     }, { 
 
     count: 1, 
 
     emote: "FourFiveSix" 
 
     }, { 
 
     count: 1, 
 
     emote: "SevenEightNine" 
 
     }, { 
 
     count: 15, 
 
     emote: "TenElevenTwelve" 
 
     }, 
 

 
    ] 
 

 
    // Define size & radius of donut pie chart 
 
    var width = 450, 
 
     height = 800, 
 
     radius = Math.min(width, height)/2.5; 
 

 
    // Define arc colours 
 
    var colour = d3.scale.category20(); 
 

 
    // Define arc ranges 
 
    var arcText = d3.scale.ordinal() 
 
     .rangeRoundBands([0, width], .1, .3); 
 

 
    // Determine size of arcs 
 
    var arc = d3.svg.arc() 
 
     .innerRadius(radius - 130) 
 
     .outerRadius(radius - 10); 
 

 
    // Create the donut pie chart layout 
 
    var pie = d3.layout.pie() 
 
     .value(function(d) { 
 
     return d.count; 
 
     }) 
 
     .sort(null); 
 

 
    // Append SVG attributes and append g to the SVG 
 
    var mySvg = d3.select('body').append("svg") 
 
     .attr("width", width) 
 
     .attr("height", height); 
 

 
    var svg = mySvg 
 
     .append("g") 
 
     .attr("transform", "translate(" + radius + "," + radius + ")"); 
 

 
    var svgText = mySvg 
 
     .append("g") 
 
     .attr("transform", "translate(" + radius + "," + radius + ")"); 
 

 
    // Define inner circle 
 
    svg.append("circle") 
 
     .attr("cx", 0) 
 
     .attr("cy", 0) 
 
     .attr("r", 100) 
 
     .attr("fill", "#fff"); 
 

 
    // Calculate SVG paths and fill in the colours 
 
    var g = svg.selectAll(".arc") 
 
     .data(pie(newData)) 
 
     .enter().append("g") 
 
     .attr("class", "arc"); 
 

 
    // Append the path to each g 
 
    g.append("path") 
 
     .attr("d", arc) 
 
     //.attr("data-legend", function(d, i){ return parseInt(newData[i].count) + ' ' + newData[i].emote; }) 
 
     .attr("fill", function(d, i) { 
 
     return colour(i); 
 
     }); 
 

 
    var textG = svg.selectAll(".labels") 
 
     .data(pie(newData)) 
 
     .enter().append("g") 
 
     .attr("class", "labels"); 
 

 
    // Append text labels to each arc 
 
    textG.append("text") 
 
     .attr("transform", function(d) { 
 
     return "translate(" + arc.centroid(d) + ")"; 
 
     }) 
 
     .attr("dy", ".35em") 
 
     .style("text-anchor", "middle") 
 
     .attr("fill", "#fff") 
 
     .text(function(d, i) { 
 
     return d.data.count > 0 ? d.data.emote : ''; 
 
     }); 
 
    
 
    var legendG = mySvg.selectAll(".legend") 
 
     .data(pie(newData)) 
 
     .enter().append("g") 
 
     .attr("transform", function(d,i){ 
 
     return "translate(" + (width - 110) + "," + (i * 15 + 20) + ")"; 
 
     }) 
 
     .attr("class", "legend"); 
 
    
 
    legendG.append("rect") 
 
     .attr("width", 10) 
 
     .attr("height", 10) 
 
     .attr("fill", function(d, i) { 
 
     return colour(i); 
 
     }); 
 
    
 
    legendG.append("text") 
 
     .text(function(d){ 
 
     return d.value + " " + d.data.emote; 
 
     }) 
 
     .style("font-size", 12) 
 
     .attr("y", 10) 
 
     .attr("x", 11); 
 
    
 
    
 
    </script> 
 
</body> 
 

 
</html>

來源

2015-08-31 00:41:38 Mark

爲什麼不在顯示圖表的位置旁邊創建另一個div，並使用ul/li元素創建圖例。您可以輕鬆匹配顏色並使用名稱。然後你可以很容易地使用CSS來進行佈局和樣式。

來源

2015-08-30 16:50:21 Dude

我會使用D3圖例顯示讓所有在1 svg – ibiza

你有沒有試過檢查一下在谷歌上找到的一些教程？例如：http://bl.ocks.org/ZJONSSON/3918369 – Dude

是的，但是當座標系定義爲半徑而不是x和y時，定位圖例時遇到困難 – ibiza

如何一個不錯的傳說添加到D3餅圖

回答

相關問題