在d3.js中访问数组元素

Question

我希望用户能够在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中的所有元素吗？

Answer 1

一般来说，您不需要在自己的结构（例如您的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();

Answer 2

Scott的答案是您尝试做的最惯用的方式。 如果您确实想将引用存储在数组中，则删除它们非常简单：

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