如何通过使用选择将D3选区划分为组.循环中的过滤器方法

How to divide a D3 selection into groups by using the selection.filter method in a loop

本文关键字：循环 方法 过滤器 划分 选区 何通过 选择 D3      更新时间：2023-09-26

这是我在这里的第一个帖子，如果看起来有点笨拙，我很抱歉。

我正在使用D3.js的力有向图上工作。我遇到了过滤器功能的问题。这是我的情况:我在我的图中创建了节点，这些节点有很多特征。我希望首先能够创建所有这些节点的子集，基于用户认为可能是相关的功能，并进行可视化分析。

例如，我正在处理玫瑰图像(这是我的节点)，我想根据它们的圆度对它们进行过滤。圆度特征可以从0到1000，所以我首先尝试制作5个子集。第一个节点的圆度从0到200，第二个节点的圆度从200到400，等等……直到最后一个子集，从800到1000。

为了得到子集，我使用d3.js的过滤函数。这就是我遇到问题的地方:

注意:- var "nodes"是我的节点集合，它们都存在。- var"groups =[]"将包含我的五个节点子集。—var"thresholds =[]"包含了我设置的所有阈值。示例:threshold[0] == 0, threshold[1] == 200, threshold[2] == 400. 

for(i = 0 ;  i < 5 ; i++)                       //going through the creation of 5 subsets
{
    groups[i] = nodes.filter(function(d, i)
    {   
            return d.Shape_Roundness > thresholds[i] && d.Shape_Roundness <= thresholds[i + 1];
            //Get the nodes "d" which have a roundness superior to a minimum threshold and inferior to a maximum threshold
    });
}

当我检查子集的输出时，只有一个结果，就好像函数在碰到"return"关键字时中断了。更重要的是，结果在每个子集中总是相同的，并且是整个集合的第一个节点。

但是当我输入硬输入时，通过用数字0和200替换例如"阈值[I]"answers"阈值[I + 1]"，像这样:

for(i = 0 ;  i < 5 ; i++)                       //going through the creation of 5 subsets
{
    groups[i] = nodes.filter(function(d, i)
    {   
            return d.Shape_Roundness > 0 && d.Shape_Roundness <= 200;
    });
}

现在，我不知道为什么，但它工作，我当然有5个相同的子集。我想也许我的变量"阈值=[]"不包含数字，但是当我对每个值使用typeof运算符时，输出是"数字"。

我想使用变量而不是硬值，因为我希望用户可以更改阈值。当然不是所有节点的特征都从0到1000

谁能告诉我我做错了什么?

非常感谢。祝大家度过美好的一天!

问题是，您使用变量i作为for循环的循环变量和过滤器部分中匿名函数的参数。

在匿名函数中，只有参数i可以访问，并且循环变量是不可见的，因为它具有相同的名称。这被称为变量遮蔽。

正如D3的文档在这里解释的那样，给filter函数回调的第二个参数是节点的索引。因此，在回调中，您访问nodes的第一个节点的thresholds[0]，访问第二个节点的thresholds[1]，以此类推。

由于您不需要过滤器当前节点的索引，最简单的修复方法是省略i参数，如下所示:

for(i = 0 ;  i < 5 ; i++) { //going through the creation of 5 subsets 
  groups[i] = nodes.filter(function(d) { 
    return d.Shape_Roundness > thresholds[i] && d.Shape_Roundness <= thresholds[i + 1];
    //Get the nodes "d" which have a roundness superior to a minimum threshold and inferior to a maximum threshold
  });
}

这样，回调函数中的i变量将引用你的循环变量。

相关文章：