Javascript d3：使用锚元素作为图表标签

我刚开始学习D3和SVG，但我还没有找到任何关于如何添加超链接的清晰信息。下面是一些代码，我必须在D3条形图中的条形图左侧写上标签。是否有一个很好的示例可以将这些标签转换为超链接（比如rangeData中的对象具有href和name/label属性）？我四处搜索了一下，但是没有得到比svg规范更多的关于添加锚元素的信息

chart.selectAll(".bar.barLabel")
        .data(rangeData)
      .enter().append("text")
        .attr("class", "bar")
        .attr("x", 0)
        .attr("y", function (d, i) { return height(i) + barHeight(y, i) / 2; })
        .attr("dx", -20)
        .attr("dy", ".35em")
        .attr("text-anchor", "end")
        .text(function (d) { return d.label; });

您可以使用来实现这一点，非常类似于HTML本身。将内容包装在

a

元素中，并使用

xlink

命名空间将链接目标作为

href

属性提供

chart.selectAll("a")
    .data(rangeData)
  .enter()
    .append("a")
    .attr("xlink:href", function(d) { return d.href; })
    .append("text")
    .text(function (d) { return d.label; });

---

或者，您可以使用直接将HTML嵌入SVG。

我采用这种方法，因为IE9或IE10中似乎不支持foreignObject。此外，我最终发现了一个非常好的页面，其中显示了一个简明的示例：