Javascript再帰変数

Question

バブルツリーダイアグラムのスクリプトセットをテストしようとしています。これらの例では、非常に単純な例を提供し、次に再帰的なコードから構築された例を示します。データ変数の子タグに子を追加できるようにする必要があります。私はそれが簡単だと分かっていますが、それを理解することはできません。指示は次のようになります。

子ノードは子配列内に（再帰的に）挿入されます。

ルートノード= { ラベル： "総予算"、 量：1000000、 子供：[{ ラベル： "健康"、 量：650000 }、{ ラベル： "政府"、 量：ここ350000 }]}

がサンプルからサンプルコードであり、I 'は、3番目の子' 要素に子を追加する：

<script type="text/javascript"> 

    $(function() { 
     var data = { 
      label: 'Total', 
      amount: 100, 
      color: '#0066bb', // color for root node, will be inherited by children 
      children: [ 
       { label: 'First child', amount: 30 }, 
       { label: 'Second child', amount: 40 }, 
       { label: 'Third child', amount: 30, color: '#ff3300' } 
      ] 
     }; 

     new BubbleTree({ 
      data: data, 
      container: '.bubbletree' 
     }); 
    }); 

</script> 

ここにgit hub wikiがあります：https://github.com/okfn/bubbletree/wiki/Bubble-Tree-Documentation

正しい方向に単純な点が大好きです。

------- OKは以下のあたりプッシュを追加しましたが、それは、私はそれがここ

<script type="text/javascript"> 

    $(function() { 
     var data = { 
      label: 'Total', 
      amount: 100, 
      color: '#0066bb', // color for root node, will be inherited by children 
      children: [ 
       { label: 'First child', amount: 30 }, 
       { label: 'Second child', amount: 40 }, 
       { label: 'Third child', amount: 30, color: '#ff3300' } 

      ] 
     }; 

     data.children.push({ label: "Computation", amount: 10 }); 

     new BubbleTree({ 
      data: data, 
      container: '.bubbletree' 
     }); 
    }); 

</script> 

Answer 1

は、そのいくつかの純粋なJavaScriptのですたい彼の子ノードをtはない親ノードの上に置いていますあなたが表示さあなたは:)

var rootNode = { 
     label: "Total budget", 
     amount: 1000000, 
     children: [ 
      { 
       label: "Health", 
       amount: 650000 
      }, { 
       label: "Government", 
       amount: 350000 
      } 
     ] 
} 

rootNode.children.push({ label: "Computation", amount: "Smomputation" }); 

rootNode.children.push({ label: "Not", amount: "Too bad" }); 

console.log(rootNode); 

プッシュ（）を求めている情報は、配列の末尾に追加されます。これはあなたがJSで理解するための非常に重要なものです。

あなたがそれらを習得するまで、私は非常に次のようなもので練習をお勧めします：

• ポップ（）; https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/pop?v=control
• push（）; https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/push?v=control
• シフト（）; https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/shift?v=control
• unshift（）; https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift?v=control
• splice（）;スライス（102） https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/slice?v=control
• indexOf（）; https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf?v=control

これは、データの収集を処理する基盤であるため、時間が非常に長くかかります。

私は、それぞれのいくつかの例を学び、次の1週間に1日に1〜2回それらをすべてメモリから書き出すことをお勧めします。

{}が表示されている場合は、おそらくオブジェクトです。 []が表示されている場合は、おそらく配列です。その後、どのツールを自由に使用できるか知っています。あなたの例では、子は[]で囲まれているので、別の子を追加するとpop（）; :)

あなたが投稿しているもののような例では有用であるので、同じように重要なのはfor loopsです。私は上記の与えた例の下にこれを追加します。

for (var i = 0; i < rootNode.children.length; i++) { 
    if (rootNode.children[i].label === "Computation") { 
     console.log("Child found: " + rootNode.children[i].label + " (Hey, thats me) - Amount: " + rootNode.children[i].amount); 
    } else { 
     console.log("Child found: " + rootNode.children[i].label + " - Amount: " + rootNode.children[i].amount); 
    } 
} 

は、あなたがこのようなものを快適になったら、大幅に加速しますfor loops、while loops、およびforEach();

あなたJavaScriptingで快適になるはずです。今、あなたがやっているこのプラクティスは、狂ったバックエンドAPIの開発作業、データベースからの文書の取得と設定（特にNoSQLタイプとグラフデータベース）、HTTPリクエスト/レスポンスへのゲートウェイです。あなたのJavaScriptの基本を理解するまで、あなたはjQueryのをやってすべきではない、または他のあなたはシンプルなもので混乱してしまいます

var data = { 
      label: 'Total', 
      amount: 100, 
      color: '#0066bb', // color for root node, will be inherited by children 
      children: [ 
       { label: 'First child', amount: 30 }, 
       { label: 'Second child', amount: 40 }, 
       { label: 'Third child', amount: 30, color: '#ff3300' } 
      ] 
}; 

data.children[2].rodent = "meat"; 
data.children[2].steven = { tractor: "driver", yolo: true }; 
data.children[2].seagull = [1,2,3]; 

console.log("JSON object version"); 
console.log("==================="); 
console.log(data); 
console.log("JSON string version"); 
console.log("==================="); 
console.log(JSON.stringify(data));