javascript - 将类分配给相同绑定(bind)数据的所有元素

Question

我有一个散点图和一个表格。散点图中的每个圆圈在表中都有对应的行。当我出于 CSS 目的将类应用于圆圈时，我还希望将相同的类分配给相应的表行。它们具有相同的数据值，但附加到单独的元素。

这是我的圈子事件:

my_circles.each(function(d,i) {
    if (my_bool===true) {
        d3.select(this).classed('selected',true);
        //d3.selectAll('tr').filter(d===???) 
    }
});

我试图使用过滤器来仅选择匹配 d 值的表行，但它不太有效，我不知道如何完成该行。这让我思考，也许有更好的方法，就像帖子标题一样，为绑定(bind)到相同数据的所有元素分配类。

如果除了我的想法之外您还有其他解决方案，那也很好。

Answer 1

可能最简单的解决方案是检查 tr 选择的 .classed() 方法(如果数据绑定(bind)到该 tr) > 与所选圆圈匹配。

my_circles.each(function(d,i) {
    if (my_bool===true) {
        d3.select(this).classed("selected",true);
        d3.selectAll('tr')
          .classed("selected", trData => d === trData);  // Set class if data matches
    }
});

但是，这有点笨拙，并且可能很耗时，因为每次调用此代码时都会迭代所有 tr。如果这是在用于处理多个选定圆圈的外循环中，如您的 comment 中所述——事情会变得更糟。

<小时/>

D3 v4

对于一种精简的方法，我更喜欢使用 D3 的 local variables ，这是 v4 的新功能，用于存储圆和表行之间的引用。这将只需要一次设置，这将取决于代码的其余部分，但可能会遵循以下几行:

// One-time setup
var tableRows = d3.local();
my_circles.each(function(d) {
  var row = d3.selectAll("tr").filter(trData => d === trData);
  tableRows.set(this, row);  // Store row reference for this circle
});

这将创建一个新的局部变量tableRows，用于存储对每个圆的相应表格行的引用。稍后您就可以检索对该行的引用，而无需进一步迭代。

my_circles.each(function(d,i) {
    if (my_bool===true) {
        d3.select(this).classed('selected',true);
        tableRows.get(this).classed("selected", true);  // Use local variable to get row
    }
});

<小时/>

D3 v3

如果您尚未使用 D3，当然还有其他方法可以实现相同的效果。就我个人而言，我更喜欢使用 WeakMap来存储引用。由于 WeakMap 的 API 还具有与 d3.local 类似的 get 和 set 方法，因此您所需要做的就是更改创建本地引用存储的行，同时保留上述代码的其余部分如下:

// var tableRows = d3.local();
var tableRows = new WeakMap();   // use a WeakMap to hold the references