Question

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

Answer 1

您可以使用a element来实现此目的，与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 element直接将HTML嵌入到SVG中。

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

1 个答案: