在 d3.js 中访问数组元素答案

【问题标题】：Accessing array elements in d3.js在 d3.js 中访问数组元素
【发布时间】：2013-10-17 22:20:42
【问题描述】：

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

【问题讨论】：

标签： javascript arrays svg d3.js

【解决方案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();

【讨论】：

谢谢你，斯科特！我最初也想这样做，但是，习惯于 C++ 和指针，我认为“正确”的方法是将这些数组视为指针数组并从那里完成我的所有工作。很高兴听到用 class/id 做这件事的风格还不错:)

【解决方案2】：

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

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

【讨论】：