35

多数のD3の例に従いますが、データは通常、 flare.jsonで指定された形式でフォーマットされます。

{
 "name": "flare",
 "children": [
  {
   "name": "analytics",
   "children": [
    {
     "name": "cluster",
     "children": [
      {"name": "AgglomerativeCluster", "size": 3938},
      :

私は次のような隣接リストを持っています：

A1 A2
A2 A3
A2 A4

上記の形式に変換したいと思います。現在、サーバー側でこれを行っていますが、d3の機能を使用してこれを実現する方法はありますか？ここで見つけましたが、このアプローチでは、保守性のために私が好まないd3コアライブラリの変更が必要なようです。助言がありますか？

4

2 に答える 2

56

通常、さまざまなアクセサ関数（ hierarchy.childrenなど）やarray.mapを使用してデータを再定義できるため、規定の形式はありません。ただし、引用した形式は、デフォルトのアクセサーで機能するため、おそらくツリーの最も便利な表現です。

最初の質問は、グラフを表示するのか、ツリーを表示するのかです。グラフの場合、データ構造はノードとリンクの観点から定義されます。ツリーの場合、レイアウトへの入力はルートノードです。ルートノードには子ノードの配列があり、そのリーフノードには値が関連付けられています。

グラフを表示する必要があり、エッジのリストしかない場合は、ノードの配列とリンクの配列を生成するために、エッジを反復処理する必要があります。「graph.csv」というファイルがあるとします。

source,target
A1,A2
A2,A3
A2,A4

d3.csvを使用してこのファイルをロードしてから、ノードとリンクの配列を生成できます。

d3.csv("graph.csv", function(links) {
  var nodesByName = {};

  // Create nodes for each unique source and target.
  links.forEach(function(link) {
    link.source = nodeByName(link.source);
    link.target = nodeByName(link.target);
  });

  // Extract the array of nodes from the map by name.
  var nodes = d3.values(nodeByName);

  function nodeByName(name) {
    return nodesByName[name] || (nodesByName[name] = {name: name});
  }
});

次に、これらのノードとリンクを力のレイアウトに渡して、グラフを視覚化できます。

代わりにツリーを作成する場合は、わずかに異なる形式のデータ変換を実行して、各親の子ノードを累積する必要があります。

d3.csv("graph.csv", function(links) {
  var nodesByName = {};

  // Create nodes for each unique source and target.
  links.forEach(function(link) {
    var parent = link.source = nodeByName(link.source),
        child = link.target = nodeByName(link.target);
    if (parent.children) parent.children.push(child);
    else parent.children = [child];
  });

  // Extract the root node.
  var root = links[0].source;

  function nodeByName(name) {
    return nodesByName[name] || (nodesByName[name] = {name: name});
  }
});

そのようです：

于 2012-06-18T19:02:08.963 に答える
5

D3は特定のフォーマットを必要としません。それはすべてあなたのアプリケーションに依存します。隣接リストをflare.jsonで使用されている形式に変換することはできますが、これもアプリケーション固有のコードになります。一般に、隣接リスト自体にはツリーを構築するために必要な「ヘッド」または「ルート」要素がないため、これを行うことはできません。さらに、サイクル、孤立などを個別に処理する必要があります。

現在サーバー側で変換を行っていることを考えると、「壊れていない場合は修正しないでください」と言いたくなるでしょう;）

于 2012-06-18T18:53:09.180 に答える