d3 get attribute with special character

Question

Lately I have been researching how to modify SVG files with d3.js. Till thus far it has been a great tool to work with but now I ran in a little problem. I create a SVG file with inkscape (a tool we have to use is build in it) and it will leave a extra attribute on the SVG file we have to read (inkscape:label) inside this extra attribute we find a Json string with some extra data on how to animate the object. However I can't seem to read the special character because of the : in it. If I remove it in the image it is fine. I also tried to escape the special character with `\u003A` (unicode for :) but nothing seems to help. However if I use native javascript `getAttribute("inkscape:label")` it works perfectly. But sadly this isn't a solution because it will break some d3 stuff. How can I do the same with d3.js? SVG File (the attribute is at the bottom): ```

Accepted Answer

The colon in a name usually defines the namespace for the name after the colon. D3 has code to deal with this, to avoid having to specify the namespace explicitly everywhere. Unfortunately, this breaks in your case as it tries to interpret the leading `inkscape` as a namespace.

The workaround is simple though -- simply add another colon as a prefix to your selector. D3 will extract this empty "namespace" and interpret the rest of the string as being in the default namespace.

```
console.log(d3.select("#path3262").attr(":inkscape:label"));
```

Complete demo here.

d3 get attribute with special character

Solution

Problem