1

Using d3.js I want to insert attributes of a specific namespace into SVG elements (embedded in a HTML5 document), more precisely that.

So I have the following JavaScript:

d3.select("body")
    .append("svg")
    .attr({width: 100, height: 100})
    .append("rect")
        .attr({width: 100, height: 100})
        .attr("myns:foo", "bar");

CSS:

rect[foo] {
    fill: red;
}

rect[myns\:foo] {
    fill: green;
}

Results in:

<html>
  <head>…</head>
  <body>
    <svg width="100" height="100">
      <rect width="100" height="100" foo="bar"></rect>
    </svg>
  </body>
</html>

see JSFiddle

I expected the generated rectangle to be green, but instead it is red. Also I wonder why the attribute is not myns:foo.

I also experimented with d3.ns.prefix (until I read that) and the CSS3 @namespace, however without success.

So can you explain to me why the code above does not work as intended and could you provide an alternative?

Community
  • 1
  • 1
Sirius
  • 11
  • 3
  • Thanks to [that post](https://groups.google.com/d/msg/d3-js/4pOdrFpgjTo/24sTzQXJYAwJ) I was able to trick D3.js by writing `":myns:foo"`: http://jsfiddle.net/6B4Pz/1/ But I cannot believe that is the way to go… – Sirius Jul 24 '14 at 18:36
  • I think that's the way to go, also see http://stackoverflow.com/questions/23857781/d3-get-attribute-with-special-character/23858218#23858218 – Lars Kotthoff Jul 24 '14 at 18:55
  • Next problem: the result is invalid according to http://validator.w3.org/: *Attribute myns:foo is not serializable as XML 1.0*, *Attribute myns:foo not allowed on element rect at this point*. Adding `xmlns:myns="…"` to the SVG element produces even more errors. – Sirius Jul 24 '14 at 19:11
  • It sounds like the answer is to not namespace your attribute names. – Lars Kotthoff Jul 24 '14 at 19:16
  • You might want to try using data attributes if you want to store arbitrary information on elements: `.attr('data-foo', 'bar')` – jshanley Jul 24 '14 at 19:24
  • I use HTML5 data attributes right now and it works like a charm, but it seems like to be not supported officially (http://stackoverflow.com/a/15580322/3874119). But I want my application to satisfy the W3 validator. Maybe I will store the data in a HTML class which is actually suitable but leads to a small overhead on updating the data respective class (find old class; delete it; add new class). By the way, the guys at ArcGIS use data attributes (https://developers.arcgis.com/javascript/jssamples/popup_relatedrecords.html). There's probably no way that fits all. – Sirius Jul 24 '14 at 19:32
  • Can you explain why you need a custom attribute at all? The example looks like you can easily use a class name instead of `foo`. Then you would be in the clear! – Mr Lister Jul 25 '14 at 07:01
  • The actual SVG contains multiple rectangles with properties like `color-1-of-5`, `color-2-of-5`,… and I want to update these properties (e. g. change the color of one rectangle from `color-3-of-5`to `color-4-of-5`). Using any kind of attribute I am able to just override the former property while the use of classes calls for deleting the former class first (which is not *that* easy if the rectangle has other classes I do not want to change). I am still torn between the different approaches. – Sirius Jul 25 '14 at 09:45

0 Answers0