d3:使用锚点元素作为图表标签

d3: use anchor elements as chart labels

本文关键字：标签 元素 d3      更新时间：2023-09-26

我刚开始使用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; });

您可以使用a元素来实现这一点，与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; });

或者，您可以使用foreignObject元素将HTML直接嵌入到SVG中。

相关文章：