d3拖动svg元素时出现拖动行为故障
我试图使用d3来创建一个包含任意数量的矩形和文本元素的块。我设想的方式是将所有内容嵌套在svg中,并使svg在所有内容都随svg一起移动时可拖动 但是,每当我将拖动行为附加到元素时,每当我移动它时,它就会模糊。即使我在svg中嵌套了一个g,以及使用g元素嵌套其他所有内容时,也会发生这种行为 下面是简化的代码。我有一个主svg,在其中插入另一个svg,在其中嵌套一个rectd3拖动svg元素时出现拖动行为故障,svg,d3.js,Svg,D3.js,我试图使用d3来创建一个包含任意数量的矩形和文本元素的块。我设想的方式是将所有内容嵌套在svg中,并使svg在所有内容都随svg一起移动时可拖动 但是,每当我将拖动行为附加到元素时,每当我移动它时,它就会模糊。即使我在svg中嵌套了一个g,以及使用g元素嵌套其他所有内容时,也会发生这种行为 下面是简化的代码。我有一个主svg,在其中插入另一个svg,在其中嵌套一个rect var dragT = d3.select('#test').append('svg').selectAll('svg.t
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,例如
<svg …>
<rect fill="white" x="-100" y="-100" width="2000" height="2000" />
…
</svg>
…
您只是看到浏览器中的重画错误没有正确地弄脏更改的区域。我今天在Windows上的Chrome上也看到了同样的情况,但在OS X下的任何浏览器上都没有出现问题。使用JSFIDLE。我制作这个样品是为了帮助你,希望它对你有益
HTML:
JavaScript:
function onDragDrop(dragHandler, dropHandler) {
var drag = d3.behavior.drag();
drag.on("drag", dragHandler).on("dragend", dropHandler);
return drag;
}
var g = d3.select("body").select("svg").append("g").data([{ x: 50, y: 50 }]);
g.append("rect")
.attr("width", 40)
.attr("height", 40)
.attr("stroke", "red")
.attr("fill","transparent")
.attr("x", function (d) { return d.x; })
.attr("y", function (d) { return d.y; })
.call(onDragDrop(dragmove, dropHandler));
g.append("text")
.text("Any Text")
.attr("x", function (d) { return d.x; })
.attr("y", function (d) { return d.y; })
.call(onDragDrop(dragmove, dropHandler));
function dropHandler(d) {
// alert('dropped');
}
function dragmove(d) {
d3.select(this)
.attr("x", d.x = d3.event.x)
.attr("y", d.y = d3.event.y);
}
你检查生成的html了吗?你确定那里只有一个直肠吗?是的。只有一个rect,其属性保持不变。