在D3 Javascript上将onclick链接添加到动画Y轴标签

Question

我想在支持数据集之间转换的D3（V4）图表的Y轴上使标签超链接，以便链接将使用其各自的值执行数据集更新功能（例如，中间标签为'data2 ”，然后点击该标签，应会执行功能update（data2），将活动数据集切换为“ data2”）。我尝试使用.on（“ end”）功能来完成此操作（因为仅选择刻度并添加onclick处理程序似乎由于缺少刻度动画修饰而失败），如下面的代码所示，但未成功。我找不到任何相关示例。有人会对此提出建议吗？

var data1 = [
   {group: "data1", value: 3},
   {group: "data2", value: 14},
   {group: "data3", value: 8}
];
var data2 = [
   {group: "dataA", value: 7},
   {group: "datax", value: 1},
   {group: "datay", value: 18},
   {group: "dataD", value: 12},
   {group: "dataF", value: 20}
];
var data3 = [
   {group: "dataG", value: 13},
   {group: "dataH", value: 8}, 
];
var dataA = [
   {group: "data1", value: 3},
   {group: "data2", value: 8}, 
];

var dataD = [
   {group: "data1", value: 23},
   {group: "data2", value: 8}, 
]; 
var datax = [
   {group: "data1", value: 5},
   {group: "data2", value: 5}, 
]; 
var dataF = [
   {group: "dataf1", value: 5},
   {group: "dataf2", value: 15}, 
]; 
var margin = {top: 30, right: 30, bottom: 70, left: 60},
    width = 500 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;
var svg = d3.select("#test")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");
var y = d3.scaleBand()
  .range([ 0, height])
  .padding(0.2);
var yAxis = svg.append("g")
  .attr("class", "myYaxis")

var x = d3.scaleLinear()
  .range([ 0, width ])
var xAxis = svg.append("g")
   .attr("transform", "translate(0,0)")
 
function update(data) {
	if (typeof data == 'string'){
		data = this[data];
	}
	x.domain([0, d3.max(data, function(d) { return d.value }) ]);
	xAxis.transition().duration(1000).call(d3.axisTop(x))
	y.domain(data.map(function(d) { return d.group; }))
	
	yAxis.transition().duration(1000).call(d3.axisLeft(y));	
	var	ylinks = d3.selectAll('.myYaxis text');
	var ylExit = ylinks.exit().remove();
	ylinks
		.data(data)
		.style('cursor', 'pointer')
		.on('click', function (d, i) {
			var x = data[i].group;
			console.log('i is ' + i + ' x is ' + x);
			update(x);
		});
	ylinks.transition()
		
	    .duration(1000)
	    .style('cursor', 'pointer');
		
}
update(data1)

<script src="https://d3js.org/d3.v4.js"></script>
<div id="test"></div>

在遇到错误并在此处找到D3: .transition() not working with events的Gerardo Furtado的回复后，我能够创建之后的Y轴标签onclick事件。但是，一个问题（反映在所示的控制台消息中）是，y轴的selectAll标签作用域仅限于所有已加载数据集中构建的数据，而不仅仅是当前数据集，因此data [i]中的索引（i）引用了多余的元素而不是正确的元素（即，一旦单击了第一个数据集，链接就不再对应于标签）。为了解决这个问题，我可能需要删除每个新数据集负载上的链接，但是这样做没有任何成功。我已经更新了上面的代码并使其可运行。