D3.js - Diagrammes de beignets avec plusieurs anneaux
L'exemple suivant montre un beignet graphique dans D3.js est-il possible d'ajouter plus d'un anneau pour le graphique?
var dataset = {
apples: [53245, 28479, 19697, 24037, 40245],
};
var width = 460,
height = 300,
radius = Math.min(width, height) / 2;
var color = d3.scale.category20();
var pie = d3.layout.pie()
.sort(null);
var arc = d3.svg.arc()
.innerRadius(radius - 100)
.outerRadius(radius - 50);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var path = svg.selectAll("path")
.data(pie(dataset.apples))
.enter().append("path")
.attr("fill", function(d, i) { return color(i); })
.attr("d", arc);
Exemple: http://jsfiddle.net/gregfedorov/Qh9X5/9/
Donc dans mon jeu de données je veux quelque chose comme ce qui suit:
var dataset = {
apples: [53245, 28479, 19697, 24037, 40245],
oranges: [53245, 28479, 19697, 24037, 40245],
lemons: [53245, 28479, 19697, 24037, 40245],
pears: [53245, 28479, 19697, 24037, 40245],
pineapples: [53245, 28479, 19697, 24037, 40245],
};
Ce que je veux, c'est avoir 5 anneaux au total tous autour du même point central, est-ce possible et quelqu'un aurait-il un exemple?
source d'informationauteur CLiown
Vous devez vous connecter pour publier un commentaire.
Oui, vous pouvez le faire assez facilement. La clé est d'utiliser imbriqués les sélections. Qui est, vous pouvez passer votre haut niveau liste de listes et de créer un élément de conteneur pour chaque liste. Alors vous faites le imbriquée de sélection et de dessiner les éléments réels. Dans ce cas particulier, vous devez également régler les rayons des arcs de sorte qu'ils ne se chevauchent pas.
Mis à jour jsfiddle ici.
En utilisant le violon que vous avez posté, il y a un "arc" définie dans le violon ici:
Que l'arc est ce qui est utilisé pour construire l'anneau graphique ici:
Donc, si vous venez de faire un autre arc pour chacun de vos jeux de données avec une variété de rayons, vous avez des anneaux supplémentaires dans votre graphique.