D3.js - Donut-charts mit mehreren Ringen

Das folgende Beispiel zeigt eine donut-Diagramm in D3.js ist es möglich, dass Sie mehr als einen ring um das Diagramm?

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

Beispiel: http://jsfiddle.net/gregfedorov/Qh9X5/9/

So, in meine Daten, die ich möchte etwas wie die folgenden:

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],
};

Was ich will, ist, dass 5 Ringe insgesamt alle um die gleichen zentralen Punkt, ist das möglich und hat jemand ein Beispiel?

InformationsquelleAutor CLiown | 2013-07-06

  1. 17

    Ja, Sie können dies ganz einfach tun. Der Schlüssel ist die Verwendung verschachtelte Auswahl. Das heißt, Sie übergeben Ihre top-level-Liste von Listen und erstellen Sie ein container-element für jede Liste. Dann tun Sie das verschachtelte Auswahl und zeichnen Sie die tatsächlichen Elemente. In diesem speziellen Fall, müssen Sie auch passen Sie die Radien der Bögen, so dass Sie nicht überlappen.

    var gs = svg.selectAll("g").data(d3.values(dataset)).enter().append("g");
var path = gs.selectAll("path")
  .data(function(d) { return pie(d); })
.enter().append("path")
  .attr("fill", function(d, i) { return color(i); })
  .attr("d", function(d, i, j) {
    return arc.innerRadius(10+cwidth*j).outerRadius(cwidth*(j+1))(d);
  });

    Aktualisiert jsfiddle hier.

    Wie kann ich festlegen, eine Klasse basierend auf dem Datensatz für jeden Pfad, der angelegt wird? Ich möchte in der Lage sein Stil die Ringe mit css?
    In der gleichen Weise wie die anderen Eigenschaften, wie z.B. .attr("class", function(d) { return "class" + d; }).
    Ich habe diese radiale Diagramm in v3: jsfiddle.net/minnie_mouse/033jrrz8 ich habe versucht es zu implementieren, in v4 hier: jsfiddle.net/minnie_mouse/758s1upm, ich habe mich verändert die Methode den Namen der v4 entspricht und behoben, alle anderen Unterschiede, die ich bin mir bewusst, der zwischen v3 und v4. Aber es ist immer noch hier und da Fehler und ich weiß nicht, was ich sonst noch haben, zu beheben. Haben Sie irgendwelche Ideen? Ich würde wirklich zu schätzen Ihre Hilfe! Vielen Dank!
    href="https://bl.ocks.org/mbostock/c150b717e18d387e1b98" >hier ist ein ähnliches Diagramm mit der version 4.
    danke, ja das habe ich gesehen, und versucht, das gleiche zu tun in jsfiddle.net/minnie_mouse/758s1upm. aber seine nicht funktioniert, und im nicht sicher, was ich falsch mache 🙁

    InformationsquelleAutor Lars Kotthoff

  2. 2

    Mit der Geige, das Sie geschrieben, es ist ein "arc" definiert, in der fiddle-hier:

    var arc = d3.svg.arc()
    .innerRadius(radius - 100)
    .outerRadius(radius - 50);

    Dass arc ist, was verwendet wird, um die ring-Diagramm hier:

    var path = svg.selectAll("path")
    .data(pie(dataset.apples))
  .enter().append("path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", arc);

    Also, wenn Sie nur aus einem anderen Bogen für jeden Ihrer Datensätze mit einer Vielzahl von Radien, müssten Sie zusätzliche Ringe in Ihrem Diagramm.

    Wie append mehrere Ringe auf der fliege...ich meine, wenn wir klicken auf den ersten ring, dann den zweiten ring angefügt wird...ich brauche das, weil der sub-Menü-Anforderung für die einzelne Fläche in arc...Bitte helfen Sie mir, in diesem ich stucked schlecht.

    InformationsquelleAutor Randolpho

Schreibe einen Kommentar