javascript - D3 ズーム可能なツリー マップ コードをテンプレートとして使用する

Question

D3でhttpリクエストなしでjsonをロードすることに関する、多少関連するスタックオーバーフローの質問

私はJavaScriptを学び始めたばかりですが、Mike Bostockによるこの非常にクールなズーム可能なツリーマップからコードを取得し、d3.jsonを使用する代わりにファイル内に独自のjsonをハードコーディングし、ツリーマップを簡単に反映させることができると野心的に考えました私の新しいデータ。練習として、上記の引用されたスタックオーバーフローの質問で推奨されている方法を使用して、正しくフォーマットする必要があることがわかっているトライアルjsonを挿入しました。コードの置き換え部分は次のようになります。

var root = {"name": "flare","children": [{"name": "analytics","children": [{"name": "cluster","children": [{"name": "MergeEdge", "size": 10 }]}]}]};

function(root) {

initialize(root);
accumulate(root);
layout(root);
display(root);

元々は次のように見えていましたが、スクリプトの最後にある閉じ括弧を削除しました。

d3.json("flare.json", function(root) {

  initialize(root);
  accumulate(root);
  layout(root);
  display(root);

しかし、ブラウザーで html ファイルを開くと、ツリーマップの代わりに空の灰色のボックスが表示されます。ある種の非常に基本的なエラーを犯していることに気づきました。それが何であるかを理解することすらできません。d3/javascriptについてもっと学ぶまで、私の「テンプレート」アプローチは運命づけられていますか、それとも簡単な修正がありますか?