Question

我希望用户能够在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元素的建议，或者至少我如何删除roughPath中的所有元素？

Answer 1

一般来说，您不需要在自己的结构中保留对选择的其他引用（例如您的roughPath数组）。相反，将DOM视为可以使用选择器查询的节点集合（在您的情况下是rects）。

如果向粗略路径上创建的节点添加类，可以使用它来查询节点组：

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();

Answer 2

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

roughPath.forEach(function(d){ d.remove(); })

访问d3.js中的数组元素

2 个答案: