I'm experimenting with using multiple class names for SVG elements so that (hopefully) I could select a subset of them using selectAll and "parts" of the class name. Unfortunately nothing I've tried works and I haven't found an example online. The code below demonstrates what I'm trying to do with a simple example of four circles. Two circles have class name "mYc 101" and two circles have class name "mYc 202". selectAll(".mYc") gives all four circles. What if I want only the circles with class name "mYc 101"? Can this be done? How? Thanks times infinity!!
<!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>
