web-dev-qa-db-fra.com

Comment utiliser D3 selectAll avec plusieurs noms de classe

J'expérimente l'utilisation de plusieurs noms de classe pour les éléments SVG afin que (je l'espère) je puisse en sélectionner un sous-ensemble en utilisant selectAll et "parts" du nom de classe. Malheureusement, rien de ce que j'ai essayé ne fonctionne et je n'ai pas trouvé d'exemple en ligne. Le code ci-dessous montre ce que j'essaie de faire avec un exemple simple de quatre cercles. Deux cercles ont le nom de classe "mYc 101" et deux cercles ont le nom de classe "mYc 202". selectAll (". mYc") donne les quatre cercles. Que faire si je veux uniquement les cercles avec le nom de classe "mYc 101"? Cela peut-il être fait? Comment? Merci infini fois !!

<!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>
svgd3.jsselectall
34
Bill Doss

La façon la plus D3 de le faire serait de chaîner les sélecteurs à l'aide de la méthode filter:

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

Cela ne fonctionnera pas car les noms de classe ne peuvent pas commencer par un nombre. Vous devez donc renommer quelque chose comme "a101" et ensuite vous pouvez faire

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

Voir ce violon .

51
Lars Kotthoff

Une autre façon que j'ai trouvée de le faire est de sélectionner les deux classes en même temps qu'une seule chaîne, par exemple:

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

Cela ne fonctionnera pas si vous ajoutez un espace entre les deux, ou ajoutez une virgule entre les deux (qui sélectionne les choses qui ont l'une ou l'autre classe à la place).

36
bobfet1