0

我正在尝试通过以下位置的刷子图表调整 Mike Bostock 的 Focus+Context：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值

任何帮助，将不胜感激。

4

1 回答 1

0

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% 准确的视觉表示，但它工作得很好。

于 2013-09-20T17:01:07.460 回答