在每个栏列之前插入锚元素以使其可制表

Question

我正在努力使我的图表符合 508 标准。因此，为了能够使用键盘导航图表，我想在每个条形列之前添加锚元素。我试过：

d3.select("svg").insert("a",".nv-bar").attr("href","");

但是没用。任何人都可以提出更好的方法吗？谢谢！

Answer 1

这是一种方法：

d3.selectAll('.nv-bar')
  .each(function() {
    var el = this;
    d3.select(el.parentNode)
      .insert('a', function(){return el;})
      .attr('href', '');
  });

无论 "before" 参数匹配多少个元素，insert 方法都会向当前选择中的每个项目添加元素。

我的解决方案将为文档中的每个栏添加一个锚点，并利用 insert 方法可以接受选择器字符串或 returns 之前插入元素的函数。（尽管有点令人沮丧，它不直接接受 DOM 节点）

编辑：这是一个带有示例的 jsfiddle：https://jsfiddle.net/bgp6atzo/

在每个栏列之前插入锚元素以使其可制表

insert anchor element before every bar column ti make it tabbable

d3.js

anchor

nvd3.js

section508