d3武力有向圖，鏈接未畫

Question

我是d3的新手，沒有太多的Web前端開發經驗。對於一個Web應用程序，我試圖繪製一個有力的圖。我一直在嘗試最後的幾個小時才能使其工作。我一直在看很多不同的代碼示例，我在做什麼看起來非常相似。我最終得到節點繪製，但節點之間的鏈接不顯示，我嘗試了不同的東西，似乎沒有任何工作。我不知道爲什麼我的代碼不會畫出邊緣。

從打印到控制檯的節點和鏈接我看到節點獲得了額外的屬性，如d3文檔中提到的，但鏈接似乎從未獲得這些屬性。下面是我的JavaScript文件和JSON文件。我將JSON文件簡化爲只有3個條目，以便更輕鬆地解決問題。

var height = 1080; 
var width = 1920; 

var color = d3.scale.category20(); 

var force = d3.layout.force() 
    .linkDistance(-120) 
    .linkStrength(30) 
    .size([width, height]); 

var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height); 


d3.json("/static/javascript/language_data.json", function(data){ 

force 
    .nodes(data.languages) 
    .links(data.language_pairs) 
    .start(); 

var link = svg.selectAll(".link") 
    .data(data.language_pairs) 
    .enter().append("line") 
    .attr("class", "link"); 

var node = svg.selectAll(".node") 
    .data(data.languages) 
    .enter().append("circle") 
    .attr("class", "node") 
    .attr("r", 5) 
    .style("fill", function(d) { return color(d.group); }) 
    .call(force.drag); 

node.append("title") 
.text(function(d) { return d.language; }); 

force.on("tick", function() { 
    link.attr("x1", function(d) { return d.source.x; }) 
     .attr("y1", function(d) { return d.source.y; }) 
     .attr("x2", function(d) { return d.target.x; }) 
     .attr("y2", function(d) { return d.target.y; }); 

    node.attr("cx", function(d) { return d.x; }) 
     .attr("cy", function(d) { return d.y; }); 
    }); 
}); 

這裏是JSON文件：

通過觀察幾個例子，我的理解是，源和目標是從節點列表索引位置。

{ 
    "languages":[ 
     {"language": "TypeScript", "group": 1}, 
     {"language": "Java", "group": 2}, 
     {"language": "VHDL", "group": 3} 
    ], 
    "language_pairs":[ 
     {"source": "0", "target": "1", "value": 5}, 
     {"source": "1", "target": "2", "value": 5}, 
     {"source": "2", "target": "0", "value": 5} 
    ] 
} 

對不起，如果我遺漏了任何東西！謝謝你的幫助！

Answer 1

兩個問題：

1）你的 「language_pairs」 源/目標指標是字符串，而不是數字。擺脫報價：

"language_pairs":[ 
    {"source": 0, "target": 1, "value": 5}, 
    {"source": 1, "target": 2, "value": 5}, 
    {"source": 2, "target": 0, "value": 5} 
] 

2）你linkDistance和linkStrength參數沒有任何意義：

var force = d3.layout.force() 
    .linkDistance(-120) // negative distance? 
    .linkStrength(30) // according to the docs, this must be between 0 and 1? 
    .size([width, height]); 

Here's an example能解決這些問題。