Selecting duplicate id's from an SVG exported from Illustrator in d3.js

435 views Asked by At

I'm currently trying to work with a fairly complex SVG I've created in Illustrator with d3.js. The SVG is a floor plan, with each floor as its own layer. To show one floor, I just need to show that layer, and hide the others, which is very convenient to keep it all in one SVG.

An issue I'm having though, is that when I export from Illustrator, there are some elements with the same name. For example, I have an Elevator A element on each floor layer. When I export to an SVG though, it will eliminate duplicate id's by renaming those to something like id = "elevator_a_1" and id = "elevator_a_2" (but not necessarily in order). I suppose one way I could solve the issue in Illustrator would be to uniquely name every element, but I think it would make a bit of a mess of my organization.

My questions are:

  1. Is it a strict rule that no id's can be repeated in an SVG, even if it's within a hierarchy? E.g. 1st_floor->elevator_a, 2nd_floor->elevator_a that would never be visible at the same time.
  2. Is there a way to select an id in d3 by just the beginning of the id (maybe via a regex or jquery-like)? E.g. d3.select("[id^='elevator_a']")
1

There are 1 answers

0
Lars Kotthoff On BEST ANSWER
  1. IDs must not be repeated -- they should be unique, regardless of where they appear.

  2. D3's selectors are CSS selectors. You can use regular expressions for attribute names, using exactly the syntax in your question.