使用 d3 将 url 作为事件侦听器动态添加到 y 轴描述

Question

通过这里的几个问题，我能够将事件侦听器添加到我的 y 轴标签。但是，我想为每个 y 轴标签添加不同的 link，这样当您单击标签（在我的示例中为数字）时，会打开一个新的 window。 link 存储在我的 CSV 中，但我无法使用 function(d) {return d.url} 添加它。用数组创建y轴标签可能是个问题？有人对此有解决方案吗？这是我的代码 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")})

我的 csv 看起来像这样：

组，activity，值，卡片，url

a,1,50,"卡片","www.google.de"

Answer 1

只有活动数组绑定到您的轴，但您可以使用索引号从数据数组中获取 url。

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

使用 d3 将 url 作为事件侦听器动态添加到 y 轴描述

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

javascript

d3.js