在D3中對鏈接使用不同的命名約定

是否可以更改D3中被視爲「鏈接」的內容？我從服務器接收的JSON被設置爲「節點」和「邊緣」而不是「節點」和「鏈接」。下面是一個簡單的JSON：在D3中對鏈接使用不同的命名約定

{ 
"nodes": [ 
{"fixed":true,"data": {"id": "foo","idType":"USERNAME","color":"red"},"selected":false}, 
{"fixed":true,"data": {"id": "bar","idType":"USERNAME","color":"yellow"},"selected": false} 
], 
"edges": [ 
{"classes":null,"data":{"color":"blue","source":"foo","target":"bar","visible":true},"grabbable":false}, 
{"classes":null,"data":{"color":"green","source":"bar","target":"foo","visible":true},"grabbable":false} 
]}

起初我還以爲它是從

var link = svg.selectAll(".link"), 
    node = svg.selectAll(".node");

宣佈然而當我改變.link到.edge我的代碼中斷。

// sets the source and target to use id instead of index 
var edges = []; 
root.edges.forEach(function(e) { 
    var sourceNode = root.nodes.filter(function(n) { 
       return n.data.id === e.data.source; 
      })[0], 
      targetNode = root.nodes.filter(function(n) { 
       return n.data.id === e.data.target; 
      })[0]; 

    // push the attributes in the JSON to the edges. 
    edges.push({ 
     source: sourceNode, 
     target: targetNode, 
     label: e.data['label'], 
     color: e.data['color'] 
    }); 
}); 

force 
     .nodes(root.nodes) 
     .links(edges) 
     .start(); 

link = link 
     .data(edges) 
     .enter().append("line") 
     .attr("class", "link") 
     .style("stroke-width", 1.5); 

node = node 
     .data(root.nodes) 
     .enter().append("g") 
     .attr("class", "node");

來源

2015-05-04 Joey

我認爲它不重要什麼d3稱它。你如何初始化你的圖表？ – Halcyon

我會用代碼更新我的問題。這有點長。 – Joey

太平的約D3不關心你叫什麼links評論使我意識到，我的代碼是不是從圖形的實際初始化打破。它正在破壞我利用id作爲source/target而不是默認index的方式。

更改root.links.forEach...到root.edges.forEach...修復了這個問題。

來源

2015-05-04 14:59:34 Joey

在D3中對鏈接使用不同的命名約定

回答

相關問題