2016-11-03 16 views
1

この質問は次のコンテキストから発生します。Cytoscape.js:クラスを取得し、フィルタリングされたノードを返します。 (getter not existent?)

デモ版hereなどのさまざまな属性を持つフィルタがあります。

最小限の実施例では、すべてのチェックボックスがノードのクラスの1つを表すと考える。

enter image description here

目標は、このフィルタのオフに基づいてノードを追加/削除することができるようになります。一部のノードは複数のクラスに属している場合があります。私はhide/showでこれを動作させることができます。そのコードはこの記事の最後にあります。

このコードでは、マウスがドロップダウンから離れるときにフィルターを実装しています。おそらく理想的ではありませんが、十分です。私はプロパティとしてクラスを含むオブジェクトallNodeClassesを持っています、そしてそれらがブール値としてフィルタを介して表示されるかどうか。

allNodeClasses = { 
class1: true 
class2: true, 
etc 
} 

以下のコードは、2つの主要な段階、セットアップ及びフィルタ(前及び後cy.batch...それぞれ)に分けることができます。 まず、booleanオブジェクトをそれぞれのボタンがチェックされているかどうかに関して更新します。次に、各ノードについて、各クラスをループし、クラスにfalseが設定されているかどうかを確認します。存在する場合、ノードは非表示になります。そのノードのすべてのクラスが真であれば、それは表示されます(これは以前の隠れノードを回復します)。

hideで置き換え、showで追加/復元することはできません(うまく機能しません...)。つまり、特定の機能は削除されたノードでは機能しないと私は信じています。

したがって、私は、次のいくつかの質問している:

質問

1)は、どのように私は削除してこの作業を行うと復元/追加することができますか?

2.)ノードクラスの「ゲッター」はありますか?そのため.classesはセッターとしてのみ動作するように見え、.classはどちらも動作しないためです。

3)トグルクラスとは...ここではうまくいくと思うからですが、ウェブサイトのデモンストレーションに役立つ例はありません。

質問1のための注記:質問1の理想的な解決法は、removedElements配列の作成と保持には関係しません。

注:理想的なソリューション - 私の心の中で - 次のsudoのコードを持っているでしょう

for elem in cyGraph     \\ for every item in the graph 
    var keepQ = true     \\ assume default 
    for class in elem.classes  \\ for every class that 
            \\ element belongs to 
     if allClasses[class] == false\\ if that class is false 
      keepQ = false   \\ we are not to keep it 
      break     \\ no need to keep searching 
    if elem.removedQ && keepQ  \\ restore only removed elements 
            \\ that we should now keep 
     elem.restore 
    if !keepQ      \\ remove filtered out elements 
     elem.remove 

CODE

$('#filter-wrapper').on('mouseleave',function(){ 

     var opts =[]; 
     for (var className in allNodeClasses) {opts.push(className)}; 

     var numOpts = opts.length; 

     for (var i = 0; i < numOpts; i++) { 
     allNodeClasses[opts[i]] = document.getElementById('filter-checkbox-'+opts[i]).checked 
     }; 


     cy.batch(function(){ 




      cy.nodes().forEach(function(node){ 
      var keepQ = true; 
      for (var i = 0; i < numOpts; i++) { 
       if (node.hasClass(opts[i]) && !allNodeClasses[opts[i]]) { 
       keepQ = false; 
       }; 
      }; 

      if (!keepQ) { 
       node.hide(); 
      } else { 
       node.show(); 
      } 
      }); 



     }); 

答えて

1

ただ、未チェックのクラスに一致する要素を削除します。

など。 fooとbarがチェックされていない場合はcy.$('.foo, .bar').remove()となります。

+0

私はそれを持っています...問題はそれらを返すことです。 – SumNeuron

+0

'.restore()'返されたコレクション – maxkfranz

+0

私はすでに.restore()を試みました。 – SumNeuron

関連する問題