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"
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")});