CODEWITHSUNDEEP
svgd3.js
ballaw
ballaw

Reputation: 1499

d3 drag behavior glitch when dragging svg elements

I am trying to use d3 to make a block which contains an arbitrary number of rects and text elements. The way I envisioned it was to nest everything within an svg and have the svg be dragable while everything moves along with it.

However, whenever I attach a drag behavior to the element it blurs whenever I move it. This behavior occurs even when I nest a g within the svg and everything else withing the g element.

Here is the simplified code. I have a main svg in which I insert another svg in which I nest a rect.

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

Update: I don't know what this entails, but I just discovered that when you scroll down so that the entire svg is out of sight and scroll back up, the afterimages disappear.

Upvotes: 2

Views: 2729

Answers (2)

Sudarshan Tanwar
Sudarshan Tanwar

Reputation: 3607

Here is an example using jsFiddle. I have made the sample to help you, and I hope it will be beneficial for you.

The HTML:

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

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

Upvotes: 1

Phrogz
Phrogz

Reputation: 303224

Fill your SVG with a big white background <rect /> behind the content, e.g.

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

You're just seeing redraw errors from the browser not properly dirtying the changed region. I was seeing the same thing today with Chrome on Windows on this test, but the problems do not appear on any browser under OS X.

Upvotes: 1

Related Questions