Javascript 向D3轴标签添加链接

以我的示例为例，我的目的是使单击轴标签（组1、组2、组3）将打开数据中指定的相应链接

我已尝试将数据重新绑定到.ticks选项，但这仅适用于第一个轴标签。因为只有名称被传递到轴映射，所以我不确定如何保留将on（'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' )
;

---

我认为您的思路是正确的，正如我们可能已经意识到的那样，d3.svg.axis将刻度上的域集绑定为刻度数据，即

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

及

幸运的是，

click

回调参数是数据本身（在本例中是

d.Name.Value

）和当前

d.Name.Value

的索引，因此可以在

数据中使用相同的索引来获取其链接，例如

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

谢谢。在尝试您提出的解决方案时，我发现至少在最新版本D3v6中，第一个函数参数实际上表示鼠标事件。你的“d”对我来说有点误导，因为我认为我可以直接传递一些“数据”。对我有效的方法与您的解决方案非常相似，但我想标准D3行为更加清晰：

d3.selectAll('.tick')
    .data(data)
    .on('click', (e, d) => {
       console.log(e); // e is the mouse click event
       console.log(d.Link); // d references the iterator object of data
     })
d3.选择全部（“.勾选”）
.数据（数据）
.on（'点击'，（e，d）=>{
console.log（e）；//e是鼠标单击事件
console.log（d.Link）；//d引用数据的迭代器对象
})
太好了。事后看来，这是显而易见的。非常感谢。
d3.selectAll('.tick')
    .data(data)
    .on('click', (e, d) => {
       console.log(e); // e is the mouse click event
       console.log(d.Link); // d references the iterator object of data
     })