Question

我正在尝试通过刷新图表来调整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值

任何帮助都将不胜感激。

Answer 1

拉尔斯，感谢指针，这通常使我朝着正确的方向前进，尽管我最终直接适应https://engineering.emcien.com/2013/05/7-d3-advanced-brush-styling的例子。这个例子有点复杂，所以我借用了与我的目的相关的子集。

我遵循的步骤包括

1。）创建附加到上下文g元素的两个图像并初始化它们的位置，这些图像不会给出在加载时刷图表的印象{i将它们放在中间（垂直）并在结束时靠近它们上下文（水平）}。

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属性绑定到它的min和max x值。

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

我不完全满意的一件事是，当我最初在画笔矩形之后创建图像时，它们就坐在它上面，如果我在图像上盘旋（这是直观的），我就无法刷牙需要的反应）。我最终将图像放在具有低不透明度的矩形后面。不是100％准确的视觉表现，但它的工作正常。

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

1 个答案: