我试图使用d3创建一个包含任意数量的rects和text元素的块 . 我设想它的方式是将所有内容嵌入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不在视线范围内并向上滚动时,余像消失了 .
2 回答
在内容后面填充一个大的白色背景的SVG,例如:
您只是看到浏览器中的重绘错误没有正确地弄脏已更改的区域 . 今天我在this test上使用Chrome浏览器看到了同样的事情,但问题并没有出现在OS X下的任何浏览器上 .
Here is an example使用jsFiddle . 我已经制作了样品来帮助你,我希望它对你有益 .
HTML:
JavaScript: