D3.js D3选择突出显示（效率？）

我有许多矩形的简单视觉效果，我想超过100个。出于美观的目的，我想在鼠标点击时创建一个强光效果。我还希望在用户单击一个新的rect后删除该效果，从而使该效果更加直观。然而，如果不调用

d3.selectAll（）

调用，我就无法实现这一点，因此我认为如果这个项目变得更大，这种方法可能并不理想。代码如下：

.on('click.highlight', function() {
//set any previously highlighted rects back to normal color/brightness
    d3.selectAll('.highlight').transition().duration(250)
        .style('fill', function(d) { return d3.rgb(d.color)})

    d3.select(this).classed('highlight',true);

//now it's safe to assign the current highlighted rect a brighter hue... i think
    d3.select(this).transition().duration(250)
        .style('fill', function(d) { return d3.rgb(d.color).brighter(.5)})
})

虽然这段代码实现了我希望它做的事情，但在任何给定的时间里，大概只能有1个其他的

高亮显示
rect需要担心。同样，我不确定在这里使用
d3.selectAll（）
是否值得

那么，有没有更有效的方法？如果可能的话，我想在（'click'）
函数上将所有内容保存在一个
内
 如果您希望避免使用
。selectAll
，则可以创建一个包含上次单击矩形的
rect
。每次单击矩形时：

取消高亮显示先前选择的高亮显示矩形
更新该选择以反映最近单击的矩形
突出显示新选择的矩形
我使用变量
highlightedRect
保存允许上述工作流的选择：


var svg=d3.select（“body”）.append（“svg”）
.attr（“宽度”，600）
.attr（“高度”，400）；
var highlightedRect=d3.select（null）；
var rects=svg.selectAll（“rect”）
.数据（d3.范围（1600））
.输入（）
.append（“rect”）
.attr（“y”，函数（d）{return Math.floor（d/50）*12；}）
.attr（“x”，函数（d）{返回d%50*12}）
.attr（“宽度”，11）
.attr（“高度”，11）
.attr（“笔划”、“白色”）
.打开（“单击”，功能（d）{
//重新选择上次单击的矩形。
高亮显示属性（“填充”、“黑色”）；
//给新的涂上颜色：
highlightedRect=d3。选择（此）；
高亮显示属性（“填充”、“钢蓝”）；
})
我要做的唯一更改是限制选择。不要使用
d3.selectAll
，而是使用
rect
的现有父选项。类似于
g
或
svg
的东西，它们都在。这将限制基础查询选择器搜索整个文档。为什么不保留对高亮显示的rect的外部引用？不需要在课堂上乱搞和重新选择。尽管这个问题在S.O中不是完全离题的，但由于你有一个工作代码，你在寻求关于最佳实践和效率的建议，你应该考虑开始使用代码复查：和我的差不多。然而，我太懒了，自己都懒得写一个完整的答案，希望没有人让我写；-）做得好！是的，我注意到它出现在我正要按下提交按钮的时候——后来我检查了小提琴，发现它是相同的解决方案——我不得不说我喜欢随机矩形的美学。