我正在尝试使用 d3 制作一个包含任意数量的矩形和文本元素的 block 。我设想的方式是将所有内容嵌套在 svg 中,并让 svg 可以拖动,同时所有内容都随之移动。
但是,每当我将拖动行为附加到元素时,每当我移动它时它都会变得模糊。即使我在 svg 中嵌套 g 以及 g 元素中的其他所有内容,也会发生此行为。
这是简化的代码。我有一个主 svg,在其中插入另一个 svg,在其中嵌套一个矩形。
var dragT = d3.select('#test').append('svg').selectAll('svg.test')
.data([{x:100,y:100}])
.enter().append('svg')
.attr('x',100).attr('y',100)
.style('width',100)
.call(rectDragBehav).append('g')
.append('rect').attr('x',100).attr('y',100)
.attr('width',100).attr('height',100);
var rectDragBehav = d3.behavior.drag()
.on('drag', rectDragDrag)
function rectDragDrag(d,i) {
d.x += d3.event.dx;
d.y += d3.event.dy; console.log(1);
d3.select(this)
.attr('x',d.x)
.attr('y',d.y);//.attr("transform", "translate(" + d.x + "," + d.y + ")");
}
更新:我不知道这意味着什么,但我刚刚发现,当你向下滚动以使整个 svg 看不见并向上滚动时,残像就会消失。
最佳答案
用大白色背景填充您的 SVG <rect />
内容后面,例如
<svg …>
<rect fill="white" x="-100" y="-100" width="2000" height="2000" />
…
</svg>
您只是看到浏览器中的重绘错误,没有正确弄脏已更改的区域。我今天在 Windows 上的 Chrome this test 上看到了同样的事情,但在 OS X 下的任何浏览器上都不会出现该问题。
关于svg - 拖动 svg 元素时 d3 拖动行为出现故障,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10010555/