d3 Classed/Styling mit mehreren IDs

Während mehrere Klassen einer ID zugeordnet werden können, kann man einer Klasse mehrere IDs zuweisen? Wenn ja, dann spare ich viel Zeit/Rechenressourcen.d3 Classed/Styling mit mehreren IDs

Ich habe versucht:

d3.select('#id1','#id2').classed('my_class',true);

I Styling auf diese Weise js auch versucht:

d3.select('#id1','#id2').style('display','none');

Nur die ersten ID funktioniert.

Gibt es eine prägnante Möglichkeit, einen solchen Fall zu behandeln? Ich wäre überrascht, wenn es in irgendeiner Form keine Umgehung geben würde. Ich kann in dieser Situation einfach keinen finden.

Quelle

2017-03-23 Arash Howaida

Wenn d3 css/jquery wie Auswahl nutzt es wahrscheinlich nur 'd3.select ('# id1, # id2')' bearbeiten sie [D3 Elemente auswählen] (https://github.com/d3/d3-selection#selecting-elements) –

Interessanter Gedanke. Ich habe es gerade probiert, keine Würfel.Muss etwas anders sein als jquery –

Also wenn ich richtig verstehe, möchten Sie einige Styling auf mehrere Elemente anwenden, deren IDs in der Form 'id1, id2, id3 ...' sind? – sparta93

Die Kommentare unterhalb der Frage haben alle Informationen, um das Problem zu beheben. Für zukünftige Leser möchte ich hier jedoch einige Punkte erwähnen.

Vor allem: lesen Sie immer die documentation. Mit wenigen Ausnahmen hat es alle Informationen, die Sie benötigen. Zum Beispiel wollen wir mal sehen, was es sagt über select:

Wählt das ersten Element, das den angegebenen Selektor String übereinstimmt. (Betonungen Mine)

Lassen Sie uns jetzt Ihren Code sehen:

d3.select('#id1','#id2') 
//    ^--------- two strings, separated by a comma

Das ist nicht eine Zeichenfolge ist. Dies ist ein String:

d3.select('#id1, #id2') 
//    ^--------- just one string here!

Zweites Problem: select wählt das ersten Element, das die Zeichenfolge übereinstimmt. Also, Sie wollen selectAll, nicht select.

Lösung: es muss sein:

d3.selectAll("#id1, #id")

Hier eine Demo ist, klicken Sie auf den Button:

d3.select("button").on("click", function() { 
 
    d3.selectAll("#c2, #c5").attr("fill", "brown"); 
 
})

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<button>Click me</button> 
 
<svg> 
 
    <circle id="c1" cx="20" cy="30" r="10" fill="teal"></circle> 
 
    <circle id="c2" cx="60" cy="30" r="10" fill="teal"></circle> 
 
    <circle id="c3" cx="100" cy="30" r="10" fill="teal"></circle> 
 
    <circle id="c4" cx="140" cy="30" r="10" fill="teal"></circle> 
 
    <circle id="c5" cx="180" cy="30" r="10" fill="teal"></circle> 
 
</svg>

Quelle

2017-03-23 22:51:11

Da OP sich besonders mit Leistungsproblemen befasst, ist es bemerkenswert, dass dieser Ansatz bei weitem übertroffen wird von der Lösung, die von Nobita [Antwort] (http://stackoverflow.com/a/42986738/4235784) vorgeschlagen wurde. Das sieht zwar viel sauberer und intuitiver aus und kommt - wie üblich - mit einer netten Erklärung. – altocumulus

@altocumulus danke für die Wertschätzung aber - überraschend? - Ich würde behaupten, dass Gerardos Ansatz wahrscheinlich leistungsfähiger ist. Anstatt mehrere Male auszuwählen, ist es immer besser, einmal auszuwählen, und genau das macht selectAll, wenn es querySelectorAll unter der Haube verwendet (siehe [hier] (https://github.com/d3/d3-selection/blob/master/src/). selection/selectAll.js) und [hier] (https://github.com/d3/d3-selection/blob/master/src/selectorAll.js#L7) in der Quelle). Außerdem ist es für D3 idiomatischer. Daher habe ich seine Antwort aufgewertet. – Nobita

@Nobita Obwohl dies intuitiv logisch erscheint, ist Ihr Ansatz tatsächlich * schneller * als Gerardo. Bei der Ausführung meines [Leistungstest] (https://jsperf.com/d3-multi-select-by-id) in Chrome ist der Testfall Nr. 2, der Ihre Antwort implementiert, mehr als zehnmal schneller als der Ansatz dieser Antwort. Das Ersetzen der inneren Auswahl durch das native 'document.getElementById()' wird diese Geschwindigkeit weiter verdoppeln. Die Ergebnisse variieren zwischen Browsern, wobei der Browser * esque * IE 11 am langsamsten ist, aber alle schneller sind als die Verwendung einer komplexen Auswahlzeichenfolge. – altocumulus

Sie können Ihre IDs in einem Array speichern und Karte über sie

var ids = ['#g1', '#g2'] 

ids.map(el => d3.select(el).classed('red', true))

here See oder hier unten:

var ids = ['#g1', '#g2'] 
 

 
ids.map(el => d3.select(el).classed('red', true));

div { 
 
    display: inline-block; 
 
    height: 20px; 
 
    width: 300px; 
 
    background: teal; 
 
} 
 

 
.red { 
 
    background: red; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<div id="g1"></div> 
 
<div id="g2"></div> 
 
<div id="g3"></div> 
 
<div id="g4"></div>

Quelle

2017-03-23 20:51:16 Nobita

d3 Classed/Styling mit mehreren IDs

Antwort

Verwandte Themen