d3：使用錨圖元素作爲圖表標籤

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