添加指向 D3 轴标签的链接

Question

使用这个 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)
  })