D3 javascript網絡：如何使用鏈接數量來設置節點大小？

我想用d3.js創建一個網絡。我已經創建了一個，如下所示，但我希望節點大小取決於每個節點具有的鏈接數量（節點具有的鏈接越多，節點的大小越大，反之亦然）。下面是我爲節點寫的JS。D3 javascript網絡：如何使用鏈接數量來設置節點大小？

如何使用鏈接數量更改節點大小？

var nodes = graph.nodes.slice(), 
     links = [], 
     bilinks = []; 

    graph.links.forEach(function(link) { 
    var s = nodes[link.source], 
     t = nodes[link.target], 
     i = {}; // intermediate node 
    nodes.push(i); 
    links.push({source: s, target: i}, {source: i, target: t}); 
    bilinks.push([s, i, t]); 
    }); 

var node = svg.selectAll(".node") 
     .data(graph.nodes) 
     .enter().append("circle") 
     .attr("class", "node") 
     .attr("r", 3) 
     .style("fill", function(d) { return color(d.group); })

來源

2016-07-03 KIM

問題是什麼？你有沒有注意到'.attr（「r」，3）'line？它將圓的半徑設置爲3.如果需要取決於當前節點，請使用計算當前數據半徑的函數替換3。 –

當然，我知道。我需要一個函數來計算每個節點所具有的鏈接數量。然後我可以用這個函數替換3。編寫函數是我要求的問題。 – KIM

爲我寫的東西不適合SO格式。 SO是Q＆A網站，而不是編碼服務。投票結束。 –

你的問題是有點不完整的一個具體的答案（你應該表現出足夠的代碼來重現你在做什麼），所以這裏是一個基於博斯托克的經典example的廣義之一。本質上，只是循環鏈接並計算節點鏈接的次數。然後用這個數來設置半徑：

graph.links.forEach(function(link){ 

    // initialize a new property on the node 
    if (!link.source["linkCount"]) link.source["linkCount"] = 0; 
    if (!link.target["linkCount"]) link.target["linkCount"] = 0; 

    // count it up 
    link.source["linkCount"]++; 
    link.target["linkCount"]++;  
}); 

// use it to set radius 
var node = svg.selectAll(".node") 
    .data(graph.nodes) 
    .enter().append("circle") 
    .attr("class", "node") 
    .attr("r", function(d){ 
    return d.linkCount ? (d.linkCount * 2) : 2; //<-- some function to determine radius 
    });

完整的運行code here。

來源

2016-07-03 22:51:49 Mark

D3 javascript網絡：如何使用鏈接數量來設置節點大小？

回答

相關問題