it-swarm.com.de

Ein d3.select ... äquivalent zu jQuery.children ()

Ich verwende d3, um einige Elemente an enter () anzuhängen und sie später zu aktualisieren. Beim nächsten Versuch, diese Elemente auszuwählen, ist die Auswahl jedoch viel größer als das Original. Dies liegt daran, dass die ursprünglichen Auswahlelemente jetzt untergeordnete Elemente des gleichen Typs haben, z. <g>, <svg>. Ich hatte erwartet, dass selectAll () nur auf der ersten Stufe arbeitet, wie jQuery.children (). Gibt es ein Äquivalent in d3? Wenn nicht, was ist der effizienteste Weg, das zu unterlegen?

17
QueueHammer

Es gibt kein Äquivalent zu jQuery.children(). Dies wird normalerweise durch Zuweisen einer Unterscheidungsklasse zu den Elementen durchgeführt, die Sie zusammen auswählen möchten, z. etwas wie das.

svg.selectAll("g").data(data)
   .enter()
   .append("g")
   .attr("class", "parent")
   .append("g")
   .attr("class", "child");

svg.selectAll("g"); // all g elements
svg.selectAll("g.parent"); // only parents
svg.selectAll("g.child"); // only children
14
Lars Kotthoff

Hier ist ein viel besserer Weg, dies zu tun:

var parent = d3.selectAll(".myParentClass");
parent.each(function(d,i) {            
   var children = d3.selectAll(this.childNodes);
   console.log(children);
});

Auf diese Weise müssen Sie nicht unnötig Klassen zu Hunderten von (oder sogar mehr) untergeordneten Knoten hinzufügen.

9
friek108

Sie können auch mit einem CSS-Selector Kinder auswählen. Was mache ich, um ein Kind aus dem Index auszuwählen:

d3.select(`#${parentId} > *:nth-child(${index + 1})`)

also vermute ich, dass dies funktioniert:

d3.selectAll(`#${parentId} > *`)
1
FXG

Wie Lars sagt, gibt es in D3 keine Entsprechung zu der Methode children (), aber hier ist eine kleine Erweiterung des Prototyps d3.selection enthalten, den ich geschrieben habe. Ich hoffe ich muss dir helfen (so spät).

d3.selection.prototype.children = function(d){
    var that = this.node();
    return this
        .selectAll(d)
        .filter(function(){ return that == this.parentNode; });
};
0
MR0

Spät zur Party, aber zumindest in d3 Version 4, kann selection.selectAll() eine Funktion übernehmen, deren Ergebnis ein Array ist, das die neuen Elemente enthält, die basierend auf dem ausgewählten Element in der vorherigen Auswahl ausgewählt werden sollen:

var parent = d3.selectAll(".myParentClass");
var children = parent
    //Convert selection to selection representing the children
    .selectAll(function() { return this.childNodes; })
    //Apply filter to children
    .filter('g')
    ;

Der Hauptvorteil dieses Ansatzes im Vergleich zu den vorherigen Antworten besteht darin, dass die Funktion selection.data() weiterhin ordnungsgemäß funktioniert. Die zuvor vorgeschlagenen Methoden, die Ergebnisse aus einem neuen, separaten Aufruf von d3.select() zuweisen, erlauben dies nicht.

0
Walt W