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

coder 2024-07-20 原文

更新: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()陈述不是很好。但这不是关于如何最好地应用无限联合过滤器的问题，而是关于基于应用的过滤器递归地改变节点和边的不透明度

最佳答案

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

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

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

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

关于javascript - 有条件地递归更改所有节点和边的不透明度(d3)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39629339/

有节 javascript code strong br dictionary recursion d3.js filtering

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

ruby-on-rails - Ruby on Rails 迁移，将表更改为 MyISAM - 2
如何正确创建Rails迁移，以便将表更改为MySQL中的MyISAM？目前是InnoDB。运行原始执行语句会更改表，但它不会更新db/schema.rb，因此当在测试环境中重新创建表时，它会返回到InnoDB并且我的全文搜索失败。我如何着手更改/添加迁移，以便将现有表修改为MyISAM并更新schema.rb，以便我的数据库和相应的测试数据库得到相应更新？最佳答案我没有找到执行此操作的好方法。您可以像有人建议的那样更改您的schema.rb，然后运行:rakedb:schema:load，但是，这将覆盖您的数据。我的做法是(假设
ruby-on-rails - 项目升级后 Pow 不会更改 ruby 版本 - 2
我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby版本(从1.9.3到2.0.0，我使用RVM)当我切换ruby版本、安装所有gem依赖项时，我通过运行railss并访问localhost:3000确保该应用程序正常运行以前，我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后，由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0，此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘
ruby - Capistrano 3 在任务中更改 ssh_options - 2
我尝试使用不同的ssh_options在同一阶段运行capistranov.3任务。我的production.rb说:set:stage,:productionset:user,'deploy'set:ssh_options,{user:'deploy'}通过此配置，capistrano与用户deploy连接，这对于其余的任务是正确的。但是我需要将它连接到服务器中配置良好的an_other_user以完成一项特定任务。然后我的食谱说:...taskswithoriginaluser...task:my_task_with_an_other_userdoset:user,'an_othe
ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2
我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征，我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现，但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden
ruby - 在 Ruby 中有条件地定义函数 - 2
我有一些代码在几个不同的位置之一运行:作为具有调试输出的命令行工具，作为不接受任何输出的更大程序的一部分，以及在Rails环境中。有时我需要根据代码的位置对代码进行细微的更改，我意识到以下样式似乎可行:print"Testingnestedfunctionsdefined\n"CLI=trueifCLIdeftest_printprint"CommandLineVersion\n"endelsedeftest_printprint"ReleaseVersion\n"endendtest_print()这导致:TestingnestedfunctionsdefinedCommandLin
ruby - 定义方法参数的条件 - 2
我有一个只接受一个参数的方法:defmy_method(number)end如果使用number调用方法，我该如何引发错误？？通常，我如何定义方法参数的条件？比如我想在调用的时候报错:my_method(1) 最佳答案您可以添加guard在函数的开头，如果参数无效则引发异常。例如:defmy_method(number)failArgumentError,"Inputshouldbegreaterthanorequalto2"ifnumbereputse.messageend#=>Inputshouldbegreaterthano
ruby - 更改 ActiveRecord 中对象的类 - 2
假设我有一个FireNinja我的数据库中的对象，使用单表继承存储。后来才知道他真的是WaterNinja.将他更改为不同的子类的最干净的方法是什么？更好的是，我很想创建一个新的WaterNinja对象并替换旧的FireNinja在数据库中，保留ID。编辑我知道如何创建新的WaterNinja来self现有FireNinja的对象，我也知道我可以删除旧的并保存新的。我想做的是改变现有项目的类别。我是通过创建一个新对象并执行一些ActiveRecord魔法来替换行，还是通过对对象本身做一些疯狂的事情，或者甚至通过删除它并使用相同的ID重新插入来做到这一点，这是问题的一部分。
python - 如何读取 MIDI 文件、更改其乐器并将其写回？ - 2
我想解析一个已经存在的.mid文件，改变它的乐器，例如从“acousticgrandpiano”到“violin”，然后将它保存回去或作为另一个.mid文件。根据我在文档中看到的内容，该乐器通过program_change或patch_change指令进行了更改，但我找不到任何在已经存在的MIDI文件中执行此操作的库.他们似乎都只支持从头开始创建的MIDI文件。最佳答案 MIDIpackage会为您完成此操作，但具体方法取决于midi文件的原始内容。一个MIDI文件由一个或多个音轨组成，每个音轨是十六个channel中任何一个上的
ruby-on-rails - 使用包含多个关联和单独的条件 - 2
我的Gallery模型中有以下查询:media_items.includes(:photo,:video).rank(:position_in_gallery)我的图库模型有_许多媒体项，每个都有一个照片或视频关联。到目前为止，一切正常。它返回所有media_items包括它们的photo或video关联，由media_item的position_in_gallery属性排序。但是我现在需要将此查询返回的照片限制为仅具有is_processing属性的照片，即nil。是否可以进行相同的查询，但条件是返回的照片等同于:.where(photo:'photo.is_processingIS
ruby-on-rails - 在 haml View 中重构条件 - 2
除了可访问性标准不鼓励使用这一事实指向当前页面的链接，我应该怎么做重构以下View代码？#navigation%ul.tabbed-ifcurrent_page?(new_profile_path)%li{:class=>"current_page_item"}=link_tot("new_profile"),new_profile_path-else%li=link_tot("new_profile"),new_profile_path-ifcurrent_page?(profiles_path)%li{:class=>"current_page_item"}=link_tot("p

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

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

随机推荐