CODEWITHSUNDEEP
svgd3.js
Manokaran K
Manokaran K

Reputation: 296

How to add desc elements using d3.js

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

Upvotes: 0

Views: 731

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

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.");

Upvotes: 2

Related Questions