0

我希望用户能够在 SVG 画布上画一条线。首先，会显示一个由 1px x 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 元素，或者至少如何删除其中的所有元素roughPath？

4

2 回答 2

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 回答
0

斯科特的回答是做你正在尝试的最惯用的方式。但是，如果您真的想将引用存储在数组中，则删除它们非常简单：

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