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：超链接或javascript on-click解决方案。

我已经看过涉及使绘图元素（例如条形）可超链接的解决方案，但该解决方案无法解决此特定问题。另外，我在同一页面上有多个图表，所以我不确定涉及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/

你必须弄清楚如何将正确的数据输入点击事件，但看起来相当容易。

D3

1 个答案: