2

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 全体が見えなくなり、上にスクロールすると、残像が消えることを発見しました。

4

2 に答える 2

1

<rect />コンテンツの背後にある大きな白い背景で SVG を塗りつぶします。

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

ブラウザからの再描画エラーが表示され、変更された領域が適切に汚れていません。今日、このテストで Windows 上の Chrome で同じことが見られましたが、OS X のどのブラウザでも問題は発生しません。

于 2012-04-12T03:09:50.633 に答える