0

ユーザーが SVG キャンバスに線を引けるようにしたい。最初に 1px × 1px の長方形で構成される「おおまかなパス」が表示され、ユーザーがマウスを離すと、なぞった線が SVG に変換されます<path>。これは、長方形を作成するコードです。

var svg = d3.select('#svg-overlay'); //SVG Canvas
var roughPath = [];
( ... )
var tx = Math.round(e.pageX - offset.left);
var ty = Math.round(e.pageY - offset.top);

roughPath.push(svg.append('rect')
    .attr('width', 1)
    .attr('height', 1)
    .attr('x', tx)
    .attr('y', ty)
    .attr('fill', 'white'));

パスを描画して に変換した後<path>、 に保存されているすべての長方形を削除できるようにしたいと考えていますroughPath。ただし、その配列内の要素に到達する方法がわかりません。d3.select(roughPath)機能しませんでしたd3.select(roughPath).selectAll('rect')、機能しませんでしたroughPath.forEach(...)。配列内に格納されている d3 要素に到達する方法、または少なくとも .d3 内のすべての要素を削除する方法を誰かが提案できますroughPathか?

4

2 に答える 2

0

スコットの答えは、あなたがしようとしていることを行う最も慣用的な方法です。ただし、参照を配列に保存したい場合は、それらを削除するのは非常に簡単です。

roughPath.forEach(function(d){ d.remove(); })
于 2013-10-17T23:48:47.340 に答える
0

roughPath一般的に言えば、独自の構造 (配列など) 内の選択への追加の参照を保持する必要はありません。代わりに、DOM を、セレクターを使用してクエリできるノード (この場合は四角形) のコレクションと考えてください。

大まかなパスで作成したノードにクラスを追加すると、それを使用してノードのグループを照会できます。

svg.append('rect')
    .attr('class', 'roughpath')
    .attr('width', 1)
    .attr('height', 1)
    .attr('x', tx)
    .attr('y', ty)
    .attr('fill', 'white');

後でノードを削除したい場合は、次のように簡単に実行できます。

svg.selectAll('rect.roughpath').remove();
于 2013-10-17T23:45:46.063 に答える