it-swarm.com.de

Verwendung von D3 selectAll mit mehreren Klassennamen

Ich experimentiere mit der Verwendung mehrerer Klassennamen für SVG-Elemente, damit ich (hoffentlich) eine Teilmenge davon mit selectAll und "Teilen" des Klassennamens auswählen kann. Leider habe ich nichts ausprobiert und online kein Beispiel gefunden. Der folgende Code zeigt, was ich mit einem einfachen Beispiel für vier Kreise zu tun versuche. Zwei Kreise haben den Klassennamen "mYc 101" und zwei Kreise den Klassennamen "mYc 202". selectAll (". mYc") gibt alle vier Kreise an. Was ist, wenn ich nur die Kreise mit dem Klassennamen "mYc 101" haben möchte? Kann das gemacht werden? Wie? Danke mal unendlich !!

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<div id="my_div"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
    var m_div = d3.select("#my_div");
    var m_svg = m_div.append("svg");

    var g = m_svg.append("g");

    g.append("circle")
        .attr("class", "mYc 101")
        .attr("cx", 100)
        .attr("cy", 100)
        .attr("r", 50) 
        .attr("style", "stroke: green; stroke-width: 8; fill: #000000");

    g.append("circle")
        .attr("class", "mYc 101")
        .attr("cx", 300)
        .attr("cy", 100)
        .attr("r", 50) 
        .attr("style", "stroke: green; stroke-width: 8; fill: #000000");

    g.append("circle")
        .attr("class", "mYc 202")
        .attr("cx", 100)
        .attr("cy", 300)
        .attr("r", 50) 
        .attr("style", "stroke: blue; stroke-width: 8; fill: #000000");

    g.append("circle")
        .attr("class", "mYc 202")
        .attr("cx", 300)
        .attr("cy", 300)
        .attr("r", 50) 
        .attr("style", "stroke: blue; stroke-width: 8; fill: #000000");

    // This selects all four circles
    var list = d3.selectAll(".mYc");

    // But if I want to select only class "mYc 101", none of these work.
    // In fact they all give an error.
    // var list1 = d3.selectAll(".mYc 101");
    // var list1 = d3.selectAll(".mYc .101");
    // var list1 = d3.selectAll(".mYc.101");
    // var list1 = d3.selectAll(".mYc,.101");
    // var list1 = d3.selectAll(".101");

</script>
</body>
34
Bill Doss

Der einfachste Weg, dies zu tun, besteht darin, die Selektoren mit der filter -Methode zu verketten:

var list1 = d3.selectAll(".mYc").filter(".101");

Dies funktioniert jedoch nicht, da Klassennamen nicht mit einer Zahl beginnen können. Also musst du dich in so etwas wie "a101" umbenennen und dann kannst du es tun

var list1 = d3.selectAll(".mYc").filter(".a101");

Siehe diese Geige .

51
Lars Kotthoff

Eine andere Möglichkeit, dies zu tun, besteht darin, beide Klassen gleichzeitig als einzelne Zeichenfolge auszuwählen, zum Beispiel:

var list1 = d3.selectAll(".mYc.a101")

Es funktioniert nicht, wenn Sie ein Leerzeichen dazwischen oder ein Komma dazwischen einfügen (wodurch Dinge ausgewählt werden, die stattdessen eine der beiden Klassen haben).

36
bobfet1