web-dev-qa-db-ja.com

D3のJSON形式に変換する方法は？

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

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

次のような隣接リストがあります。

A1 A2
A2 A3
A2 A4

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

javascriptjsongraphd3.jstree
35
Legend

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

最初の質問は、 graph を表示するか、または tree を表示するかです。グラフの場合、データ構造は nodes および links で定義されます。ツリーの場合、レイアウトへの入力はルートノードであり、ルートノードには 子ノード の配列があり、リーフノードには関連する 値 があります。

グラフを表示し、エッジのリストのみが必要な場合は、エッジを反復処理して生成しますノードの配列とリンクの配列。 「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});
  }
});

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

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

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});
  }
});

そのようです：

54
mbostock

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

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

5
Lars Kotthoff