Добавление ссылок на метки осей D3

Question

В качестве примера я использую this JSFiddle, мои намерения состоят в том, чтобы сделать так, чтобы щелчок по меткам оси (группа 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') 
; 

Answer 1

Я думаю, что вы на правильном пути, под капотом, как, возможно, уже понял, d3.svg.axis связывает домен, установленный на шкале, как данные клещи, т.е.

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

и

y0.domain(data.map(function (d) { 
    return d.Name.Value; 
})); 

к счастью click параметры обратного вызова являются сама точка привязки (который в данном случае является d.Name.Value) и индекс текущего d.Name.Value, поэтому один и тот же индекс можно использовать в data, чтобы получить его ссылку, например.

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