web-dev-qa-db-ja.com

D3強制レイアウト-インデックスではなく名前でノードをリンク

インデックスではなくIDでd3ノードをリンクしようとしています（ノードIDはアプリケーションによって生成されます）。

これが私のノードです：

"Nodes": [
    {
      "Id": "338",
      "Name": "TEST NODE ONE",
      "Url": "http://www.google.com"
    },
    {
      "Id": "340",
      "Name": "TEST NODE TWO",
      "Url": "http://www.yahoo.com"
    },
    {
      "Id": "341",
      "Name": "TEST NODE THREE",
      "Url": "http://www.stackoverflow.com"
    },
    {
      "Id": "342",
      "Name": "TEST NODE FOUR",
      "Url": "http://www.reddit.com"
    }
  ]

それらは現在、インデックスによってリンクされています。

  "links": [
    {
      "source": 0,
      "target": 0,
      "value": "0"
    },
    {
      "source": 0,
      "target": 1,
      "value": "0"
    },
    {
      "source": 1,
      "target": 2,
      "value": "0"
    },
    {
      "source": 3,
      "target": 2,
      "value": "0"
    }
  ]

ただし、「Id」でリンクしたいと思います。

  "Links": [
    {
      "Source": "338",
      "Target": "338",
      "Value": "0"
    },
    {
      "Source": "338",
      "Target": "340",
      "Value": "0"
    },
    {
      "Source": "340",
      "Target": "341",
      "Value": "0"
    },
    {
      "Source": "342",
      "Target": "341",
      "Value": "0"
    }
  ]

私はここで提案された解決策を試みました： https://groups.google.com/forum/#!msg/d3-js/LWuhBeEipz4/0kZIojCYvhIJ

force.nodesを呼び出す前に、次の行を追加します。

  // make links reference nodes directly for this particular data format:
  var hash_lookup = [];
  // make it so we can lookup nodes in O(1):
  json.Nodes.forEach(function(d, i) {
    hash_lookup[d.Id] = d;
  });
  json.Links.forEach(function(d, i) {
    d.source = hash_lookup[d.Source];
    d.target = hash_lookup[d.Target];
  });

上記のデバッグを試みましたが、理解できません。次のエラーメッセージが表示されます（通常、リンクが正しく設定されていないことを意味します）。

Uncaught TypeError: Cannot read property 'weight' of undefined

私の完全なJSへのリンク： http://jsfiddle.net/9sMrw/

javascriptjsond3.js
20
Blair

これを行う簡単な方法は次のとおりです。

var edges = [];
json.Links.forEach(function(e) {
    var sourceNode = json.Nodes.filter(function(n) {
        return n.Id === e.Source;
    })[0],
        targetNode = json.Nodes.filter(function(n) {
            return n.Id === e.Target;
        })[0];

    edges.Push({
        source: sourceNode,
        target: targetNode,
        value: e.Value
    });
});

force
    .nodes(json.Nodes)
    .links(edges)
    .start();

var link = svg.selectAll(".link")
    .data(edges)
    ...

これが機能しています [〜＃〜]プランク[〜＃〜] 。 （私がうっかり削除してしまった場合に備えて、安全のためにフォークする必要があります。）

26
FernOfTheAndes