Come utilizzare D3 selectAll con più nomi di classe

Sto sperimentando l'utilizzo di più nomi di classi per gli elementi SVG in modo che (si spera) potrei selezionare un sottoinsieme di essi utilizzando selectAll e "parts" del nome della classe. Purtroppo nulla di ciò che ho provato funziona e non ho trovato un esempio online. Il codice seguente mostra cosa sto cercando di fare con un semplice esempio di quattro cerchi. Due cerchi hanno il nome di classe "mYc 101" e due cerchi hanno il nome di classe "mYc 202". selectAll (". mYc") dà tutti e quattro i cerchi. Cosa succede se voglio solo le cerchie con il nome di classe "mYc 101"? Può essere fatto? Come? Grazie infinite!Come utilizzare D3 selectAll con più nomi di classe

<!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>

fonte

2013-07-02 Bill Doss

Il modo più D3 per farlo sarebbe quello di catena di selettori usando il metodo filter:

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

Questo non funziona, però, perché i nomi di classe non può iniziare con un numero. Quindi bisogna rinominare in qualcosa come "A101" e allora si può fare

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

Vedi this fiddle.

fonte

2013-07-02 21:26:45

Grazie mille Lars !! La chiave era il fatto che i nomi delle classi non possono iniziare con un numero. Bill –

Un altro modo che ho trovato per farlo è quello di selezionare entrambe le classi, allo stesso tempo come una singola stringa, ad esempio:

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

Non funzionerà se si aggiunge in uno spazio in mezzo, o aggiungi una virgola tra (che seleziona invece le cose che hanno entrambe le classi).

fonte

2014-05-04 00:24:33 bobfet1

La risposta di Lars è più piena, ma questo è quello che mi ha aiutato a capire. –

inoltre, è possibile utilizzare 'var list1 = d3.selectAll (" circle.mYc.a101 ")' – Felix

Come utilizzare D3 selectAll con più nomi di classe

risposta

Problemi correlati