通过刷图向Focus+Context添加拖动图标
通过刷图向Focus+Context添加拖动图标
提问于 2013-09-18 19:58:44
我试图通过刷图来调整mbostock的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值。
任何帮助都将不胜感激。
回答 1
Stack Overflow用户
发布于 2013-09-20 17:01:07
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属性绑定到它的min和max x值。
var ext = brush.extent();
leftHandle.attr("x",x2(ext[0]));
rightHandle.attr("x",x2(ext[1]));有一件事我并不完全满意，那就是当我最初在画笔矩形之后创建图像时，它们就坐在上面，如果我徘徊在图像上(这是我想要的直观反应)，我就无法刷了。最后，我把图像放在矩形后面，这个矩形的透明度很低。不是100%准确的视觉表现，但它工作得很好。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18881259
复制相关文章
相似问题
腾讯云开发者
