0

http://bl.ocks.org/mbostock/1283663を使用しています

そして、私は次のコードを変更しようとしています

d3.json("readme.json", function(root) {
  hierarchy.nodes(root);
  x.domain([0, root.value]).nice();
  down(root, 0);
});

JSON.parse (一部のデータ) に。JSONデータのプルに問題はありませんが、残りのd3.jsonプロセスでhierarchy.node(root)、x.domain、およびdown(root)を使用してセットアップされているものについて完全に混乱しています

4

1 に答える 1

1

この関数で何が起こっているかを実際に理解する前に、おそらくもう少しドキュメントを読む必要があるでしょう。これは、最初は難しい例です。理解しようとする私のプロセスがどのようになるかを説明します。行ごとに行く：

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

これにより、参照されたjson ファイルが読み込まれ、関数が呼び出されます。'root' は、json ファイルと同じところから始まります。

  hierarchy.nodes(root);

コードを調べると、階層が宣言されている場所がわかります。

var hierarchy = d3.layout.partition()
    .value(function(d) { return d.size; });

したがって、階層はある種のレイアウトであり、hierarchy.nodesはルートにいくつかの有用な属性を追加し、グラフ化を容易にします。

  x.domain([0, root.value]).nice();

見つかった例で「x」を検索しますx = d3.scale.linear().range([0, w])。Tt は、x が線形スケールであるように見えます。基本的に、 x 関数はドメイン内の値を[0, root.value]範囲に変換します[0, w]。w は SVG の幅です。root.value は少しトリッキーです。ノードページには

value - 値アクセサーによって返されるノード値

しかし、値アクセサとは何ですか? の最初の宣言は、ルートの「サイズ」属性と何か関係があることを示していますが、何ですか? この時点で、ドキュメントはかなり混乱し始めているため、デバッガーを開いて、ルートとルートの子の値属性がどのように見えるかを正確に確認することをお勧めします。

down(root, 0);

down 関数はこの例に固有のもので、よくコメントされています。ドキュメントを参照しながら読んでみて、理解できるかどうかを確認してください。

于 2013-06-09T03:14:57.813 に答える