0

私はこのチュートリアルを進めています -

http://flowingdata.com/2012/08/02/how-to-make-an-interactive-network-visualization/

わからない部分があります。

「最後に、ノード ID をノード オブジェクトにマッピングし、リンクのソースとターゲットを、生データにあった ID ではなく、ノード オブジェクト自体に置き換えます。これにより、D3 のフォース レイアウトが正しく機能し、それが可能になります。ノード配列とリンク配列の順序が乱れることを心配することなく、ノードを追加/削除できます。」

setupData = (data) ->
  # initialize circle radius scale
  countExtent = d3.extent(data.nodes, (d) -> d.playcount)
  circleRadius = d3.scale.sqrt().range([3, 12]).domain(countExtent)
  data.nodes.forEach (n) ->
    # set initial x/y to values within the width/height
    # of the visualization
    n.x = randomnumber=Math.floor(Math.random()*width)
    n.y = randomnumber=Math.floor(Math.random()*height)
    # add radius to the node so we can use it later
    n.radius = circleRadius(n.playcount)
  # id's -> node objects
  nodesMap  = mapNodes(data.nodes)
  # switch links to point to node objects instead of id's
  data.links.forEach (l) ->
    l.source = nodesMap.get(l.source)
    l.target = nodesMap.get(l.target)
    # linkedByIndex is used for link sorting
    linkedByIndex["#{l.source.id},#{l.target.id}"] = 1

  data

これは、関数 setupData() に関する部分の後に述べられています。ノード ID をノード オブジェクトにマップする意味がわかりません。ノード オブジェクトは後で update() メソッドによって作成されるようです。

これらのノード オブジェクトは何ですか? どのように mapNodes()

4

1 に答える 1

1

力有向グラフを作成するときは、各ノードのデータとノードの接続方法を指定する必要があります。それらがどのように接続されているかに関する情報は、フォース グラフで直接呼び出されるforce.links([])メソッドによって設定されます。リンクの配列内の各データ ポイントには、インデックス (データの配列内の位置) または配列自体内の実際のオブジェクトとして定義されるソースとターゲットがあります。

例えば。

var banana = {type: "fruit", color: "yellow"};
var apple = {type: "fruit", color: "red"};
..etc

var data = [apple, banana, sausage, peach, bagel, kimchee.. etc etc ]

var links = [{source: 1,target: 2}, 
             {source: 2, target: 10}, ....etc. ] //as index

また

 var links = [{source:banana,target:apple},
              {source:apple, target:orange}, 
              ....etc. ] //as object

初期データでは、各曲に id があり、ソース/ターゲットはそれらの id を指すように定義されています。このステップで、最初の ID 文字列の ID に一致する実際のオブジェクトを置き換えます。

于 2013-04-07T06:04:00.493 に答える