D3 is giving me a syntax error with d3.selectAll()

Question

My scenario is like this: I'm trying to select a class from a list of classes, that starts with a number but is of type string (I checked).

list_item.on("click", function(){
  var to_find = $(this).text().replace(/\s/g, "_");

  console.log(typeof(to_find)); // on a certain moment this will become "00s"

  sampleSVG.selectAll(".node:not(."+to_find+") circle, .line:not(."+to_find+")")
    .transition()
    .duration(500)
    .style("fill", st_colours.node.fill)
    .style("stroke", function(d){return d.type == "node" ? st_colours.node.stroke : st_colours.line.stroke});

  sampleSVG.selectAll(".node."+to_find+" circle, .line."+to_find)
    .transition()
    .duration(1000)
    .style("fill", st_colours.random(a))
    .style("stroke", d3.rgb(st_colours.random(a)).darker());
});

When "var to_find" changes into "00s", I'm getting this error:

SyntaxError: An invalid or illegal string was specified

Can anybody tell me why I'm getting this error?

Answer 1

In your selectors you are referring to a class named 00s:

.node:not(.00s)

According to the CSS grammar, classnames should start with an underscore, a dash, or a letter. Maybe this is why you encountered a SyntaxError.

See also: Which characters are valid in CSS class names/selectors?