So fügen Sie eine nette Legende, eine d3-Kreisdiagramm
Habe ich mein Kreisdiagramm arbeiten ok, aber ich möchte hinzufügen, eine schöne Legende, die Art, wie diese (made in mspaint)
kann aber nicht ganz, damit es funktioniert...
Hier ist mein Kreisdiagramm code (ohne Legende Teil) :
HTML:
<!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>
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich bin überrascht, es ist nicht mehr "stock" Beispiele für diese Art der Sache.
Hier ist ein quickie Legende, sieht nett aus mit Ihren Daten:
Vollständigen Beispiel:
HTML:
Warum nicht erstellen Sie einfach ein weiteres div in der Nähe, wo Sie zeigen Sie Ihre Grafik, und erstellen Sie die Legende mit ul/li-Elementen. Sie können mit den Farben einfach und verwenden Sie die Namen. Dann können Sie den Einsatz von css für die Platzierung und styling ganz einfach.