向D3軸標籤添加鏈接

Question

以我的示例使用this JSFiddle爲例，我的意圖是使其單擊軸標籤（組1，組2，組3）將打開數據中指定的相應鏈接。

我試圖將數據重新綁定到.ticks選項，但只適用於第一個軸標籤。由於只有名稱被傳遞給軸映射，所以我不確定如何保留關聯以將標籤添加（'click'...）事件。

感謝您的時間和事先的幫助。

var data = [{ 
    "Items": [{ 
     "Value": 3327, 
     "Name": { 
      "Value": "A" 
     }, 
    }, { 
     "Value": 794, 
     "Name": { 
      "Value": "B" 
     }, 
    }, { 
     "Value": 1999, 
     "Name": { 
      "Value": "C" 
     }, 
    }, ], 
    "Type": "Group", 
    "Name": { 
     "Value": "Group 1" 
    }, 
    "Link": "www.espn.com", 
}, { 
    "Items": [{ 
     "Value": 3317, 
     "Name": { 
      "Value": "A" 
     }, 
    }, { 
     "Value": 787, 
     "Name": { 
      "Value": "B" 
     }, 
    }, { 
     "Value": 2008, 
     "Name": { 
      "Value": "C" 
     }, 
    }, ], 
    "Type": "Group", 
    "Name": { 
     "Value": "Group 2" 
    }, 
    "Link": "http://www.stackoverflow.com", 
}, { 
    "Items": [{ 
     "Value": 3290, 
     "Name": { 
      "Value": "A" 
     }, 
    }, { 
     "Value": 760, 
     "Name": { 
      "Value": "B" 
     }, 
    }, { 
     "Value": 2019, 
     "Name": { 
      "Value": "C" 
     }, 
    }, ], 
    "Type": "Group", 
    "Name": { 
     "Value": "Group 3" 
    }, 
    "Link": "http://www.google.com", 
}] 

var variables = ['A', 'B', 'C']; 

var width = 300; 
var margin = { 
    left: 100 
}; 
var height = 300; 

var y0 = d3.scale.ordinal() 
.rangeRoundBands([0, height], .1); 

var y1 = d3.scale.ordinal(); 

var x = d3.scale.linear() 
.range([0, width - margin.left]); 

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

var svg = d3.select('body').append('svg') 
.attr('width', width) 
.attr('height', height) 
.append('g') 
.attr('transform', 'translate(' + margin.left + ', 0)'); 

y0.domain(data.map(function (d) { 
    return d.Name.Value; 
})); 
y1.domain(variables).rangeRoundBands([0, y0.rangeBand()]); 
x.domain([0, d3.max(data, function (d) { 
    return d3.max(d.Items, function (d) { 
     return d.Value; 
    }); 
})]); 

svg.append('g') 
    .attr('transform', 'translate(0, 0)') 
    .call(yAxis); 

var measures = svg.selectAll('.name') 
.data(data) 
.enter().append('g') 
.attr('class', 'bar') 
.attr('transform', function (d) { 
    return 'translate(0, ' + y0(d.Name.Value) + ')'; 
}); 

measures.selectAll('rect') 
    .data(function (d) { 
    return d.Items; 
}) 
    .enter().append('rect') 
    .attr('height', y1.rangeBand() - 1) 
    .attr('x', 0) 
    .attr('y', function (d) { 
    return y1(d.Name.Value) 
}) 
    .attr('width', function (d) { 
    return x(d.Value) 
}); 


measures.selectAll('text') 
    .data(function (d) { 
    return d.Items; 
}) 
    .enter() 
    .append('text') 
    .attr('x', 10) 
    .attr('y', function (d) { 
    return y1(d.Name.Value) + y1.rangeBand()/2 
}) 
    .text(function (d) { 
    if (d.Name.Value) { 
     return d.Name.Value + ' - ' + d.Value; 
    } else { 
     return d.Value; 
    } 

}) 
    .attr('dy', '.35em') 
    .style('fill', 'red') 
; 

Answer 1

，我認爲你是在正確的軌道上，在引擎蓋下的可能已經意識到d3.svg.axis結合作爲刻度線的數據，即規模設置域名

var yAxis = d3.svg.axis() 
    .scale(y0) 

和

y0.domain(data.map(function (d) { 
    return d.Name.Value; 
})); 

好在click回調參數是基準本身（在這種情況下是d.Name.Value）和當前d.Name.Value的索引，因此可以在data中使用相同的索引來獲得其鏈接。

d3.selectAll('.tick') 
    .on('click', function (d, i) { 
    console.log(data[i].Link) 
    })