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

我想在svg图表中的鼠标上方显示工具提示。工具提示本身将包含html元素，其中插入了来自moused-over svg元素的数据。为了存储将被插值的值，我想对每个svg元素使用“desc”元素，如下所示：。这些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> 

谢谢，

---

马诺

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

---

要添加到Lars的回复中，如果您想对许多元素执行此操作，可以在选择时使用此方法。例如，如果您将圆作为d3选择，您将使用：circles.eachfunction，i{var desc=d3.selectthis.appenddesc；/*然后使用Lars'code*/}的其余部分；。你甚至不需要这个-你可以简单地做圆周运动；等等。这将自动将desc元素附加到圆选择中的每个元素。当然。我认为您需要使用each，以便访问数据变量来设置描述性内容。但元素将自动从其附加到的圆继承数据。所以您可以执行desc=circles.appenddesc.attr/*namespace*/；然后desc.appendmydoc:title.htmlFunction{return d.title；}使用相应数据对象的内容填充每个圆的描述。感谢您的响应。当我尝试添加类似attr的'xmlns:xhtml'attr.attrxmlns:xhtml时，http://www.w3.org/1999/xhtml 我得到以下错误：Uncaught NamespaceError：试图创建或更改对象的方式与名称空间不符。嗯，我认为您不能也不应该为属性指定名称空间。你想做什么？