Menu
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> 
684
Use the getElementsByClassName method to get elements by multiple class names, e.g. document. getElementsByClassName('box green') . The method returns an array-like object containing all the elements that have all of the given class names.
d3. select selects the first matching element whilst d3. selectAll selects all matching elements. Both functions take a string as its only argument.
selectAll() function in D3. js is used to select all the element that matches the specified selector string. Parameters: This function accepts single parameter HTML tag as a parameter. Return Value: This function returns the selected elements.
The most D3 way to do this would be to chain the selectors using the filter method:
var list1 = d3.selectAll(".mYc").filter(".101"); This won't work though because class names cannot start with a number. So you have to rename to something like "a101" and then you can do
var list1 = d3.selectAll(".mYc").filter(".a101"); See this fiddle.
134
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
