d3.select通过命名空间属性

Question

This almost does it for my case:

d3.select('g[id^="layer"]')

But it's just not bulletproof. I need to be able to do:

d3.select('g[inkscape:groupmode="layer"]')

This produces an invalid selector error. Doesn't make a difference whether I add inkscape to d3.namespaces or not.

Ps I'm working on an Inkscape edited SVG, I need to be able to render it in browser DOM, manipulate it and export it back to an SVG with all "metadata" in namespaced attributes intact.

Answer 1

I ended up filtering using Element.getAttributeNS .

// Set namespace
d3.namespaces.inkscape = 'http://www.inkscape.org/namespaces/inkscape'

// Filter selection
d3.select('#my_svg').selectAll('g').filter(function (d, i) {
    return this.getAttributeNS(d3.namespaces.inkscape, 'groupmode') === 'layer'
})

Does anyone know of a more D3-like way of doing it?