svg - d3 js api
Cómo usar D3 selectAll con múltiples nombres de clase (2)
Estoy experimentando con el uso de varios nombres de clase para los elementos SVG para que (con suerte) pueda seleccionar un subconjunto de ellos utilizando select All y "partes" del nombre de clase. Lamentablemente, nada de lo que he intentado funciona y no he encontrado un ejemplo en línea. El siguiente código demuestra lo que estoy tratando de hacer con un simple ejemplo de cuatro círculos. Dos círculos tienen el nombre de clase "mYc 101" y dos círculos tienen el nombre de clase "mYc 202". selectAll (". mYc") da los cuatro círculos. ¿Qué sucede si solo quiero los círculos con el nombre de clase "mYc 101"? Se puede hacer esto? ¿Cómo? Gracias veces infinito !!
<!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>
La forma más D3 de hacer esto sería encadenar los selectores utilizando el método de filter :
var list1 = d3.selectAll(".mYc").filter(".101");
Sin embargo, esto no funcionará porque los nombres de las clases no pueden comenzar con un número. Entonces debe cambiar el nombre a algo así como "a101" y luego puede hacer
var list1 = d3.selectAll(".mYc").filter(".a101");
Mira este violín .
Otra forma que he encontrado para hacer esto es seleccionar ambas clases al mismo tiempo como una sola cadena, por ejemplo:
var list1 = d3.selectAll(".mYc.a101")
No funcionará si agrega un espacio intermedio, o agrega una coma en el medio (que selecciona elementos que tienen una clase en su lugar).