javascript - 有条件地递归更改所有节点和边的不透明度(d3)

Question

更新:I have created a JSFiddle here .请用你的答案发布一个更新的 fiddle 。

我有动态过滤器，用户可以将其应用于数据，但它们会更改节点的不透明度以指示过滤入和过滤出的内容(过滤后的“out”元素仍然部分可见，并且未使用实际的 d3 filter() 函数(故意地))。我还在每个被过滤掉的节点上设置了一个属性(例如 node = {"name": "test", "isFilteredOut": true}; )。 所以就这个问题而言，即使我使用了“过滤器”这个词，它实际上只是一个有条件的样式更改 (我会尝试在这篇文章的引号中加上“过滤器”这个词来提醒这一点)。

这一切都很好，但现在我想递归地“过滤”掉所有子节点和“过滤掉”节点的边，以及将初始“过滤掉”节点连接到其未过滤掉的父节点的边.

我能找到的所有示例都以单击事件开始，因此可以使用this。获取所选初始节点的数据。我没有这种奢侈因为过滤器是使用不在图表本身内的 UI 元素应用的。

我目前像这样“过滤”节点:

node.style("opacity", function(n) {
    if (my_filter_conditions) {
        return 1;
    } else {
        n.isFilteredOut = true;
        return 0.1;
    }
});

我基本上需要做的是:

递归地选择当前“过滤掉”节点的所有子节点并“过滤”掉这些节点(即将它们的不透明度更改为 0.1 并设置 n.isFilteredOut = true; )。

将所有边缘的不透明度更改为 0.1，其中源节点或目标节点被“过滤掉”(即边缘任一端的 n.isFilteredOut = true;)

我试过的

我不知道如何访问源节点和目标节点的数据，只给定每个来自边缘的索引(请记住，我没有从单击事件开始的 this 节点)。我尝试通过从边缘获得的节点索引来获取节点数据:

var node_data = d3.select(current_edge.source.index).datum();

但是，这导致了与 this.node() 相关的 d3 库错误。为空(因此在此处传递索引不起作用)。

我还尝试通过将用于处理链接的函数嵌套在传递给 node.style() 的函数中来处理边缘。函数，但随后它尝试处理每个节点上的所有边缘，但我无法让它提供所需的结果。

link.style("opacity", function (e) {
    return ( (n.isFilteredOut)
            && (n.index==e.source.index | n.index==e.target.index) ) ? 0.1 : 1;
});

这是我尝试在“过滤掉”节点的两侧“过滤掉”边缘，但是当我出于某种原因使用它时，没有一个边缘被过滤掉(看起来好像什么也没发生)。

更新:I have created a JSFiddle here .

fiddle 注释:

我知道它很简单(它应该是一个最小的工作示例)

实际应用程序包含适用于类型的过滤器(即使只是搜索特定设备/部件/等)，因此逻辑能够有条件地遵循“链”仅适用于那些具有 node.isFilteredOut = true; 的节点，这一点很重要。

在此示例中，正确答案将导致创建 的情况。过滤掉设备也会过滤掉所有部分

使用 dataSet 进行任何过滤的解决方案本身不起作用，因为我的大部分数据都是从各种 JSON 源动态填充的。随时与 nodes 合作, edges , links , node , 和/或 link .

请不要重写我的过滤方法。是的，我知道eval()陈述不是很好。但这不是关于如何最好地应用无限联合过滤器的问题，而是关于基于应用的过滤器递归地改变节点和边的不透明度

Answer 1

这是一种可能的方法，它同时实现递归过滤(如果过滤设备，则过滤其部分)和基于节点过滤的链接过滤:http://jsfiddle.net/Lsr9c8nL/4/

我改变了你实现过滤器的方式。使用字符串构建过滤器，然后 eval()这些天被认为很糟糕，因为工具不能用 eval() 做很多事情。 ，例如检测错误或优化浏览器上的 JS 代码。

我直接在 dataSet 上进行过滤，而不是在节点上(您必须在其中查询节点的 type 并比较字符串，这很慢)。直接在数据集上这样做还可以轻松找到给定部件的设备。

诀窍基本上是每次都重绘整个图，小心使用d3的exit , enter和 update选择。如果您愿意，这也将允许您添加动画