0

I want to show tooltips on mouseover in an svg chart. The tooltip itself will have html elements with data from the moused over svg element interpolated into it. To store the values that will be interpolated, I want to use 'desc' elements for each of the svg elements (as pointed here: https://stackoverflow.com/a/15569558/751002 ). These desc elements will contain the values needed for interpolating into the tooltip. Now, how do I append these desc elements using d3.js, for example, to arrive at the following structure:

<circle class="show-tooltip" cx="-7" cy="0" r="7">
  <desc xmlns:mydoc="http://example.org/mydoc">
    <mydoc:title>This is an example SVG file</mydoc:title>
    <mydoc:para>The global description uses markup from the 
    <mydoc:emph>mydoc</mydoc:emph> namespace.</mydoc:para>
  </desc>
</circle>

Thanks, mano

Community
  • 1
  • 1
Manokaran K
  • 320
  • 1
  • 2
  • 11

1 Answers1

2

The basic structure of the D3 code would be this.

var desc = element.append("circle")
  // set attributes
  .append("desc")
  .attr("xmlns", "http://www.w3.org/1999/xhtml");

desc.append("mydoc:title").html("This is an example SVG file");
desc.append("mydoc:para").html("The global description uses markup from the <mydoc:emph>mydoc</mydoc:emph> namespace.");
Lars Kotthoff
  • 107,425
  • 16
  • 204
  • 204
  • To add to Lars' reply, if you want to do this for many elements, you can use the [`each()`](https://github.com/mbostock/d3/wiki/Selections#wiki-each) method on your selection. For example, if you have your circles as a d3 selection, you would use: `circles.each(function(d,i){ var desc = d3.select(this).append("desc"); /* and then the rest of Lars' code */ });`. – AmeliaBR Jan 15 '14 at 16:48
  • You don't even need this -- you could simply do `circles.append("desc");` etc. This will automatically append `desc` elements to each element in the `circles` selection. – Lars Kotthoff Jan 15 '14 at 16:50
  • Of course. I was thinking that you'd need the `each` so that you could access the data variables to set the descriptive content. But the `` element will automatically inherit the data from the circle that it is appended to. So you could do `desc = circles.append("desc").attr(/*namespace*/);` and then `desc.append("mydoc:title").html(function(d){ return d.title;})` to fill the description for each circle with content from the appropriate data object. – AmeliaBR Jan 15 '14 at 16:55
  • Thanks for the response. When I try to add the 'xmlns:xhtml' attr like `.attr("xmlns:xhtml", "http://www.w3.org/1999/xhtml")` I get the following error: `Uncaught NamespaceError: An attempt was made to create or change an object in a way which is incorrect with regard to namespaces.` – Manokaran K Jan 15 '14 at 17:22
  • Hmm, I don't think you can (or should need to) specify namespaces for attributes. Do you want to do [this](http://jsfiddle.net/Xva5j/)? – Lars Kotthoff Jan 15 '14 at 18:08
  • Using the latest example given by Manokaran, this should be sufficient: `.attr("xmlns", "http://www.w3.org/1999/xhtml")` And there is really no need to add any namespace prefix to any of the children. All descendants will inherit the namespace of the parent. – FernOfTheAndes Jan 15 '14 at 19:19
  • As far as I can tell, browsers just don't give a flying F! about namespaces when parsing a ` ` doc. I get the same error when trying to specify a named namespace, even though the format is exactly as given in the examples in the [SVG `` tag](http://www.w3.org/TR/SVG/metadata.html) spec. So then I tried [this experiment](http://jsfiddle.net/Xva5j/3/) with the same code three times, hard-coded vs dynamic, named NS vs default. When I query the namespace, I get the xhtml namespace for the hard-coded versions and the svg namespace for the dynamic version. ??? – AmeliaBR Jan 15 '14 at 20:57
  • But regardless, @FernOfTheAndes suggestion is valid XML (important if you want to save the images as stand-alone SVG) that doesn't cause errors for the html parser, so I'd go with that. – AmeliaBR Jan 15 '14 at 21:02
  • Thanks LarsKotthoff, FernOfTheAndes, AmeliaBR. Your suggestion solved my problem. If the original answer is updated I can accept it. Thanks. – Manokaran K Jan 16 '14 at 05:31
  • Updated. Is it what you're looking for now? – Lars Kotthoff Jan 16 '14 at 09:09