首页 文章

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

提问于
浏览
2

我试图使用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 回答

  • 1

    在内容后面填充一个大的白色背景的SVG,例如:

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

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

  • 1

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

相关问题