Question

我想在svg图表中显示鼠标悬停的工具提示。工具提示本身将具有html元素，其中插入了svg元素的moused数据。为了存储将要插值的值，我想为每个svg元素使用'desc'元素（如此处指出：https://stackoverflow.com/a/15569558/751002）。这些desc元素将包含插入工具提示所需的值。现在，如何使用d3.js附加这些desc元素，以达到以下结构：

<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>

谢谢，真

Answer 1

D3代码的基本结构就是这个。

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

如何使用d3.js添加desc元素

1 个答案: