关于如何使用键盘控制 d3 笔刷/缩放的任何提示: 1. 专注笔刷控制能力 2. 能够使用键盘改变笔刷区域

是否支持开箱即用？

更新:显然没有开箱即用的解决方案(希望 d3 会在某个时候提供)。这意味着自定义解决方案将取决于可视化/场景。发布实际的用户体验和要求，并将针对此特定案例提供解决方案。

为了满足可访问性要求，任务是修改下面的图表控件，以便能够使用键盘进行缩放/画笔。这包括:1) 能够设置焦点； 2) 能够使用左右箭头键进行控制。

最佳答案

我要用这个 bl.ock作为引用。我相信这是您图像的来源。

缩放和画笔功能比较

我们对这个 block 中的一些东西感兴趣，缩放代码和刷亮代码:

function brushed() {
  if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return; // ignore brush-by-zoom
  var s = d3.event.selection || x2.range();
  x.domain(s.map(x2.invert, x2));
  focus.select(".area").attr("d", area);
  focus.select(".axis--x").call(xAxis);
  svg.select(".zoom").call(zoom.transform, d3.zoomIdentity
      .scale(width / (s[1] - s[0]))
      .translate(-s[0], 0));
}

function zoomed() {
  if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return; // ignore zoom-by-brush
  var t = d3.event.transform;
  x.domain(t.rescaleX(x2).domain());
  focus.select(".area").attr("d", area);
  focus.select(".axis--x").call(xAxis);
  context.select(".brush").call(brush.move, x.range().map(t.invertX, t));

两个函数:

• 检查是否应该执行函数的主体
• 设置一个新的 x 尺度域
• 更新面积和轴

区别很重要:

画笔函数使用 d3.zoomIdentity 更新比例，它必须这样做，因为它需要更新缩放函数以反射(reflect)当前缩放比例和变换。

缩放功能手动设置画笔，必须这样做，因为需要更新画笔。

在没有事件的情况下放大并刷“入”

要通过键盘控制它，使用 brushed() 函数作为模板可能更容易。这是因为当前的缩放变换可能很难检索，而欺骗画笔中的更改相对容易。

在 brushed 函数中，d3.event.selection 中的值是一个数组，其中包含画笔所包含的值范围(范围内的值，而不是域中的值)。它是画笔覆盖的引用/上下文比例 x2 中最小和最大范围值的数组。这是我们唯一需要同时更新缩放和画笔的东西。

要放大，我们可以采用焦点 x 尺度的域并找到域的最小值和最大值。然后我们可以重新设置 focus x scale 的域稍微小一点，有效地放大。下面的代码将域转换为一个范围，并在将其转换回域之前缩小该范围 - 这是不需要的，但更紧密地遵循 brushed() 函数，意味着不必处理日期。

var xMin = x2(x.domain()[0]);
var xMax = x2(x.domain()[1]);

var currentDifference = Math.abs(xMin-xMax);

xMin += currentDifference / 2 / 3   // increase the minimum value of the domain
xMax -= currentDifference / 2 / 3   // decrease the maximum value of the domain
x.domain([xMin,xMax].map(x2.invert, x2));

我们也可以这样设置缩放比例:

var identity = d3.zoomIdentity
  .scale(width/ (xMax - xMin))

我们还想修改缩放的变换，以便我们放大到先前较大域的中心。以下只是示例 block 中使用的代码的复制，但为了说明起见使用了更清晰的名称:

var identity = d3.zoomIdentity
  .scale(width/ (xMax - xMin))
  .translate(-xMin, 0);

如果我们使用 brushed 函数作为模板，我们可能会得到:

var xMin = x2(x.domain()[0]); // minimum value in x range currently
var xMax = x2(x.domain()[1]); // maximum value in x range currently

var currentDifference = Math.abs(xMax-xMin); // center point of range

xMin += currentDifference / 2 / 3  // reduce the distance between center point and end points
xMax -= currentDifference / 2 / 3

x.domain([xMin,xMax].map(x2.invert, x2));  // convert the range to a domain
focus.select(".area").attr("d", area); // redraw the chart
focus.select(".axis--x").call(xAxis);  // redraw the axis

var identity = d3.zoomIdentity
  .scale(width/ (xMax - xMin))
          .translate(-xMin, 0);          // update the zoom factor

context.select(".brush").call(brush.move, x.range().map(identity.invertX, identity)); // update the brush
svg.select(".zoom").call(zoom.transform, identity); // apply the zoom factor

这会将焦点区域放大到以当前域的中心为中心的区域。使用上面的代码，域名将缩小三分之一，但可以根据您的需要进行更改。

与原始刷函数相比，唯一真正的区别是我们:

• 手动计算笔刷范围
• 使用缩放功能中使用的方法更新画笔。

就是这样。

其他操作

您可以通过扩大而不是缩小域来缩小，只需在定义新端点时切换符号即可:

xMin -= currentDifference / 2 / 3  
xMax += currentDifference / 2 / 3

向左移动看起来像:

xMin -= currentDifference / 2 / 3  
xMax -= currentDifference / 2 / 3

而自然地向右移动则相反。

添加键盘

现在您所要做的就是设置一个监听器来监听击键:

d3.select("body")
  .on("keypress", function() {
    if (d3.event.key == "a") {
      // one of zoom in/out/pan
    }
    else if (d3.event.key == "b" {
      //...
    }
});

将它们放在一起

我组装了一个 block 来显示所有内容，我使用 asdw 进行关键输入:

• a:向左平移
• d:向右平移
• w:放大
• s:缩小。

最后一点:我已经包含了一项检查以确保新域在边界内:我们不想超出我们的数据域。

Here's例子。

关于javascript - Accessibility: d3 brush/zoom 可以获得焦点并用键盘控制，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47296060/