Add url dynamically as event listener to y-axis description with d3-CodePudding

with a few questions from here, I was able to add an event listener to my y-axis label. However, I would like to add a different link for each y-axis label so that when you click on a label(in my example the numbers), a new window opens. The link is stored in my CSV, but I have not been able to add it with function(d) {return d.url}. It might be a problem that the y-axis label is created with an array? Does anyone have a solution for this? Here is my code https://codepen.io/Lea12/pen/dyzKEOV

var y_axis = d3.scaleBand()
.range([ height, 0 ])
.domain(data.map(function(d) { return d.activity; }))
.padding(0.01);

svg2.append("g")
.call(d3.axisLeft(y_axis))
.attr("class","y_axis")
.selectAll("text")
.on("click", function(d){window.open(d.url,"_blank")})

My csv looks like this:

group,activity,value,card,url

a,1,50,"card","www.google.de"

CodePudding user response：

Only the array of activities is bound to your axis, but you can use the index number to get the url from your data array.

svg2.append("g")
    .call(d3.axisLeft(y_axis).tickFormat(function(d,i) { return data[i].url }))
    .attr("class","y_axis")
    .selectAll("text")
    .on("click", function(d,i){    window.open(data[i].url,"_blank")});