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 是正确的选择。如果您不想 select 所有文本元素，只需在文本或其中一个文本容器中添加一个 class。

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 中数据驱动的轴标签超链接

Data-driven Axis-Label Hyperlinks in D3

javascript

svg

data-visualization

hyperlink

d3.js