D3.js 将拖动图标添加到焦点+；通过刷图的上下文

我正试图通过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值

---

如果有任何帮助，我们将不胜感激。

拉尔斯，感谢你的指点，虽然我最终直接从上一次的一个例子中进行了修改，但它总体上指引了我正确的方向。这个例子有点复杂，所以我借用了与我的目的相关的子集

我遵循的步骤包括

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

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

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

---

我不完全满意的一件事是，当我最初在画笔矩形之后创建图像时，它们位于其上方，如果我将鼠标悬停在图像上方，则无法进行画笔操作（这是所需的直观反应）。最后，我把图像放在不透明度低的矩形后面。虽然不是100%准确的视觉表现，但效果很好。

确保将图像附加到

g

元素，而不是

rect

s。现在，您可以尝试将css类

指针事件：none

添加到图像中，这使得交互透明

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