0

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

1 回答 1

1

您可以使用a元素来实现这一点，这与 HTML 本身非常相似。您将内容包装在a元素中，并将链接目标作为具有命名空间的href属性提供xlink。

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

于 2013-08-24T10:02:13.683 回答