d3 を使用して、任意の数の四角形とテキスト要素を含むブロックを作成しようとしています。私が思い描いた方法は、すべてを svg 内にネストし、すべてがそれに沿って移動している間、svg をドラッグ可能にすることでした。
ただし、要素にドラッグ動作を追加すると、移動するたびにぼやけます。この動作は、svg 内に ag をネストし、その他すべてを g 要素内にネストした場合でも発生します。
これが簡略化されたコードです。rect をネストする別の 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 全体が見えなくなり、上にスクロールすると、残像が消えることを発見しました。