Ich versuche also, eine Map aus einer .svg-Datei zu erstellen, die ich mit Illustrator erstellt habe, weil es eine Karte der Niederlande mit nicht so einfachen Regionen ist.
Alle Regionen haben ihre eigene # ID.
Jetzt versuche ich, jede Region entsprechend ihrem Wert im Dataset zu färben. Ich kann Farbe auf den Regionen erzwingen, indem ich es in einer Region mache, aber das ist offensichtlich keine gute Lösung.
Wenn ich zum Beispiel versuche, (#id) auszuwählen und dann die .attr ("fill", "red") zu ändern; es funktioniert nicht.
Wie würde ich die Regionsfarben anhand der ID aktualisieren, indem Sie d3.js entsprechend dem d [1] -Wert im Dataset verwenden?
Dateien: Ссылка
Live-Link: Ссылка
Das Problem besteht darin, dass Ihre Illustrator-Datei bereits Füllfarben für die einzelnen <path> -Elemente angibt und Ihre ID-Werte für die übergeordneten <g> -Elemente gelten. Untergeordnete Elemente erben Stile von übergeordneten Elementen, aber nur, wenn das untergeordnete nicht eigene Werte besitzt.
Es gibt ein paar Dinge, die Sie tun könnten, um es zu ändern:
Ändern Sie die Illustrator-Datei so, dass die Pfade nicht gefüllt sind. Dann erben sie eine Füllfarbe, die auf dem Elternelement festgelegt ist.
Wählen Sie die Pfade direkt mit d3.selectAll("g#id path") oder d3.select("g#id").selectAll("path") ; In beiden Versionen werden alle <path> -Elemente ausgewählt, die von der <g> elment mit der ID "id" abstammen. Dann können Sie das Füllattribut direkt festlegen, um den Wert aus Illustrator zu überschreiben.
Wie in den Kommentaren zur Hauptfrage besprochen, wenn Sie dies noch einen Schritt weiterführen und die Daten tatsächlich zu den Elementen für zukünftige Referenz hinzufügen möchten (zB in einem Event-Handler), ist der einfachste Weg, durch Ihre Wählen Sie jedes Element aus und verwenden Sie dann die Methode .datum(newData) , um die Daten an jedes Element anzuhängen :
Wenn Sie in Zukunft alle Elemente der obersten Ebene <g> auswählen möchten, würde ich vorschlagen, ihnen auch eine Klasse zu geben, damit Sie sie beispielsweise mit d3.select("g.region") auswählen können. Zum Beispiel:
Beispielimplementierung: Ссылка
Obwohl die Verwendung von dataset.forEach nicht die volle Leistungsfähigkeit von d3 zu nutzen scheint, ist es tatsächlich viel einfacher als der Versuch, den gesamten Datensatz auf einmal anzuhängen - vor allem, da es eine solche Variabilität in der Struktur der Regionen gibt, Einige davon haben <g> elements verschachtelt:
Diese Geige zeigt den oben genannten Code in Aktion, aber ich würde wiederum empfehlen, den forEach Ansatz zu verwenden.