通过刷图向 Focus+Context 添加拖动图标

Question

我正在尝试调整 Mike Bostock 的 Focus+Context via Brushing 图表，网址为：bl.ocks.org/mbostock/1667367 ‎ 以在画笔矩形的两条垂直线上包含一个拖动图标。一旦做出选择，它们就会出现，并作为视觉提示来缩小或扩大选定/刷过的区域。我看到图像的位置是动态的，即随着刷过的区域流畅地移动，而不是在刷过的区域重置后进行更新。对我来说最合理的做法是将 svg 图像添加到上下文矩形中，如下所示：

//original code
context.append("g")
  .attr("class", "x brush")
  .call(brush)
  .selectAll("rect")
  .attr("y", -6)
  .attr("height", height2 + 7)

//additional code
 .append("svg:image")
  .attr("xlink:href", "icon.png")
  .attr("width", 10)
  .attr("height", 10)
  .style("opacity",1)

我尝试过使用两个图像的 x 和 y 定位，但没有让它们出现，但我在概念上认为它可以正常工作

• y轴：上下文图表高度除以2
• x轴：每张图片分别对应刷过区域的最小和最大x值

任何帮助将不胜感激。

Answer 1

Lars，感谢您的指导，尽管我最终直接改编自 https://engineering.emcien.com/2013/05/7-d3-advanced-brush-styling 的示例，但它通常引导我朝着正确的方向前进。这个例子有点复杂，所以我从一个与我的目的相关的子集中借用。

我遵循的步骤包括

1.) 创建两个附加到上下文 g 元素的图像并在某个位置初始化它们的位置，该位置不会给人以图表在加载时被刷过的印象{我将它们放在中间（垂直）并在结尾处靠近上下文（水平）}。

var leftHandle = context.append("image")
  .attr("xlink:href", "icon.gif")
  .attr("width", 11)
  .attr("height", 27)
  .attr("x",x2(data[data.length-6].date))
  .attr("y", (height2/2)-15);

var rightHandle = context.append("image")
  .attr("xlink:href", "icon.gif")
  .attr("width", 11)
  .attr("height", 27)
  .attr("x",x2(data[data.length-1].date))
  .attr("y", (height2/2)-15);

2.) 在画笔函数中，我创建了一个变量来保存 Brush.extent()，然后将图像的 x 属性与其最小和最大 x 值绑定。

var ext = brush.extent();
  leftHandle.attr("x",x2(ext[0]));
  rightHandle.attr("x",x2(ext[1]));

我不完全满意的一件事是，当我最初在画笔矩形之后创建图像时，它们坐在它上面，如果我将鼠标悬停在图像上，我就无法画笔（这是直观的所需的反应）。我最终将图像放在不透明度较低的矩形后面。不是所寻求的 100% 准确的视觉表示，但它工作得很好。