Wie fügt man einem d3-Balkendiagramm ein Array von Anmerkungen hinzu?

Question

Ich habe es geschaffen, ein Balkendiagramm zu zeichnen (es ist invertiert ich weiß :)) für jedes Jahr der Daten, die durch in den CSV-Daten zu lesen und dann d3.nest() zu einer Gruppe unter Verwendung der Daten für jedes Datum pro Jahr, siehe Block here oder blockbuilder here. Allerdings versuche ich nun, Notizen aus meinem Array annotations an jedes Diagramm anzuhängen, und ich stecke fest.

Ein Ansatz, den ich versuche, ist selectAll(".charts") und an meine verschachtelten Annotationen Array d. H. annotationsPerYear. Aber ich finde es schwierig, meinen annotationsPerYear-Schlüssel mit meinen Diagrammen zu verbinden und dann die Notizen für jedes Jahr zu iterieren und an das richtige Diagramm anzuhängen. Irgendwelche Ideen?

Answer 1

Sie können sich auf verschachtelte Auswahlen verlassen. Sie verwenden bereits verschachtelte Auswahl mit diesem Bit:

svg.selectAll(".bar") 
    .data(function(d) {return d.values;}) 

Die obige unterschiedliche Daten zu jedem der drei SVGs bindet zuvor erstellt haben. Dies geschieht durch dreimaliges Aufrufen der function(d) und gibt jedes Mal eine andere d.values zurück.

Sie können eine ähnliche Funktion zum Binden und zum Erstellen eines anderen Satzes von Anmerkungen in jedem SVG verwenden. Sie benötigen eine Funktion (übergeben an data()), die die entsprechenden Anmerkungen pro Diagramm zurückgibt, aber dieses Mal haben Sie nicht etwas wie d.values vorberechnet. Stattdessen müssen Sie die entsprechenden Anmerkungen aus annotations Array extrahieren, mit filter():

svg.selectAll(".annotation") 
    .data(function(d) { 
    // return annotations whose key matches d's key 
    return annotations.filter(function(a) { return a.key == d.key; }); 
    }) 

Dann können Sie enter() und append() verwenden, wie Sie getan haben für die Balken den Text und die Position, es zu schaffen. Ich bin nicht sicher, wie Sie beabsichtigen, es zu lassen, aber insgesamt wollen Sie so etwas wie dieses:

svg.selectAll(".annotation") 
    .data(function(d) { 
    return annotations.filter(function(a) { return a.key == d.key; }); 
    }) 
.enter() 
    .append("text") 
    .attr("class", "annotation") 
    .attr("x", function(d) { return x(d.xPos); }) 
    .attr("y", function(d) { return d.yPos; }) 
    .text(function(d) { return d.note; }) 

See:

• Updated block
• Updated blockbuilder