D3中的數據驅動軸標籤超鏈接

Question

我試圖將數據驅動的超鏈接添加到我創建的某些D3.js圖表​​的y軸標籤中。然而，儘管我盡最大努力在網上搜索解決這個問題的方法，但我還沒有找到確切的解決方案（或者我誤解了我見過的解決方案中的某些內容）。

爲了簡單起見，我創建了一個基本的水平條形圖作爲示例。下面的代碼：

var table = [ 
      { id: 1, name: 'Entity 1', value: 10 }, 
      { id: 2, name: 'Entity 2', value: 20 }, 
      { id: 3, name: 'Entity 3', value: 30 }, 
     ]; 

    var height = 100; 
    var width = 300; 
    var leftMargin = 100; 
    var rightMargin = 10; 
    var topMargin = 10; 
    var bottomMargin = 50; 

    var x = d3.scale.linear() 
     .domain([0, 30]) 
     .range([0, width]); 

    var y = d3.scale.ordinal() 
     .domain(table.map(function(d, i) { 
      return d.name; })) 
     .rangeRoundBands([0, height]); 

    var chart = d3 
     .select('body') 
     .append('svg') 
     .attr('height', height + topMargin + bottomMargin) 
     .attr('width', width + leftMargin + rightMargin); 

    var bars = chart 
     .selectAll('rect') 
     .data(table) 
     .enter() 
     .append('rect') 
      .attr('x', x(0) + leftMargin) 
      .attr('y', function(d, i) { 
       return y(d.name) + topMargin; }) 
      .attr('height', y.rangeBand()) 
      .attr('width', function(d, i) { 
       return x(d.value); }); 

    var xAxis = d3.svg 
     .axis() 
     .scale(x) 
     .orient('bottom'); 

    chart 
     .append('g') 
     .attr("transform", "translate(" + leftMargin + "," + (height + 15) + ")") 
     .call(xAxis); 

    var yAxis = d3.svg 
     .axis() 
     .scale(y) 
     .orient('left'); 

    chart 
     .append('g') 
     .attr("transform", "translate(" + (leftMargin - 5) + "," + topMargin + ")") 
     .call(yAxis); 

下面是該代碼生成圖表（是的，我已經有意離開它無樣式讓事情變得簡單）：

從本質上講，我需要什麼是爲了演示如何修改此代碼，以便y軸標籤是格式爲「http://www.test.com/entity/ {entityID}」的超鏈接，其中「{entityID」}是與每行數據相關聯的整數ID「

我是魚翅e與svg：超鏈接或javascript點擊式解決方案。

我已經看過涉及使繪圖元素（例如條）超級鏈接的解決方案，但該解決方案並未解決此特定問題。另外，我在同一頁面上有多個圖表，所以我不確定涉及d3.selectAll（'text'）的解決方案是否可行，除非有辦法將它過濾到只有y軸標籤上具體圖表。

任何幫助，您可以提供將不勝感激！

Answer 1

我覺得selectAll是要走的路。如果您不想選擇所有文本元素，只需向文本或其中一個文本容器中添加一個類。

chart 
    .append('g') 
    .attr("transform", "translate(" + (leftMargin - 5) + "," + topMargin + ")") 
    .attr("class", "entityLink") //***THIS IS NEW*** 
    .call(yAxis); 

//*** THIS IS NEW *** 
d3.selectAll(".entityLink text") 
    .on("click", function() { alert("hooray"); }); 

CSS

.entityLink text { 
    fill: blue; 
    cursor: pointer; 
} 

完整的例子：https://jsfiddle.net/memrr22q/

你必須弄清楚如何得到正確的數據爲點擊事件，但似乎相當容易。