Question

I am trying to make an interactive graph out of an svg with paths for edges and circles for nodes. To find children of a node I want to be able to search edges for ids with a certain regex since the ids are all of the form: “node1_id node2_id”. I’ve tried a number of solutions, including dollar dollar notation and placing regex directly into a find element by id, but I’ve had no luck. I can’t find anything else that answers this and I’m pretty new to front-end dealings so I’m not sure if this might be something specific to svg or not.

$$('path[id^="\b10020 ([\d]+)"')
Error: SYNTAX_ERR: DOM Exception 12

document.getElementById("\b10020 ([\d]+)")
null

Are probably the two most sensible attempts I’ve made. all edges with node1_id being 10020 in this case.

<path fill="none" stroke-width="1.0"
              d="M -1026.321777,958.875610 C -987.123413,912.258789 -858.400574,901.130981 -811.783752,940.329346"
              id="10020 12050" stroke-opacity="1.0" stroke="#7dcb3c"/>

Being an example of one such edge that should have returned a match.

Answer 1

Were I doing it, I would change the markup to:

<path fill="none" stroke-width="1.0"
      d="M -1026.321777,958.875610 C -987.123413,912.258789 -858.400574,901.130981 -811.783752,940.329346"
      data-node-1="10020" data-node-2="12050" stroke-opacity="1.0" stroke="#7dcb3c"/>

Then using “single dollar notation” (aka, jQuery):

$('path[data-node-1="10020"]')