javascript - D3 中数据驱动的轴标签超链接

Question

我正在尝试将数据驱动的超链接添加到我正在创建的一些 D3.js 图表的 y 轴标签。然而，尽管我尽最大努力在网上搜索这个问题的解决方案，但我还没有找到确切的解决方案(或者我误解了我所看到的解决方案中的某些内容)。

为简单起见，我创建了一个基本的水平条形图作为示例。这是代码:

    var table = [
          { id: 1, name: 'Entity 1', value: 10 },
          { id: 2, name: 'Entity 2', value: 20 },
          { id: 3, name: 'Entity 3', value: 30 },
        ];

    var height = 100;
    var width = 300;
    var leftMargin =  100;
    var rightMargin = 10;
    var topMargin = 10;
    var bottomMargin = 50;

    var x = d3.scale.linear()
        .domain([0, 30])
        .range([0, width]);

    var y = d3.scale.ordinal()
        .domain(table.map(function(d, i) {
            return d.name; }))
        .rangeRoundBands([0, height]);

    var chart = d3
        .select('body')
        .append('svg')
        .attr('height', height + topMargin + bottomMargin)
        .attr('width', width + leftMargin + rightMargin);

    var bars = chart
        .selectAll('rect')
        .data(table)
        .enter()
        .append('rect')
            .attr('x', x(0) + leftMargin)
            .attr('y', function(d, i) {
                return y(d.name) + topMargin; })
            .attr('height', y.rangeBand())
            .attr('width', function(d, i) {
                return x(d.value); });

    var xAxis = d3.svg
        .axis()
        .scale(x)
        .orient('bottom');

    chart
        .append('g')
        .attr("transform", "translate(" + leftMargin + "," + (height + 15) + ")")
        .call(xAxis);

    var yAxis = d3.svg
        .axis()
        .scale(y)
        .orient('left');

    chart
        .append('g')
        .attr("transform", "translate(" + (leftMargin - 5) + "," + topMargin + ")")
        .call(yAxis);

这是这段代码生成的图表(是的，为了简单起见，我故意不设置样式):

基本上，我需要有人演示如何修改此代码，以便 y 轴标签是格式为“http://www.test.com/entity/ {entityID}”的超链接，其中“{entityID”} 是关联的整数 ID每行数据”。

我可以使用 svg:a 超链接或 javascript 的点击解决方案。

我已经研究过涉及使绘图元素(例如条形图)可超链接的解决方案，但该解决方案并未解决此特定问题。此外，我在同一页上有多个图表，所以我不确定涉及 d3.selectAll('text') 的解决方案是否有效，除非有一种方法可以将其过滤为仅包含 y 轴标签具体图表。

如果您能提供任何帮助，我们将不胜感激!

Answer 1

我觉得 selectAll 是正确的选择。如果您不想选择所有文本元素，只需向文本或其中一个文本容器添加一个类即可。

chart
    .append('g')
    .attr("transform", "translate(" + (leftMargin - 5) + "," + topMargin + ")")
    .attr("class", "entityLink") //***THIS IS NEW***
    .call(yAxis);

//*** THIS IS NEW ***
d3.selectAll(".entityLink text")
  .on("click", function() { alert("hooray"); });

CSS

.entityLink text {
    fill: blue;
    cursor: pointer;
}

完整示例:https://jsfiddle.net/memrr22q/

您必须弄清楚如何将正确的数据输入到点击事件中，但这似乎很容易。