d3拖动svg元素时拖动行为毛刺

Question

我正在尝试使用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不在视线中并向上滚动时，余像消失了。

Answer 1

在内容后面填充一个大的白色背景<rect />，例如

<svg …>
  <rect fill="white" x="-100" y="-100" width="2000" height="2000" />
  …
</svg>

您只是看到浏览器中的重绘错误没有正确地弄脏更改的区域。我今天在this test上使用Chrome浏览器看到了同样的事情，但问题不会出现在OS X下的任何浏览器上。

Answer 2

Here is an example使用jsFiddle。我已经制作了样本来帮助你，我希望它对你有益。

HTML：

<svg height="400" width="600"></svg>

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);
    }