d3 force направленный граф, ссылки не нарисованы

Question

Я новичок в d3 и не очень много опыта разработки веб-интерфейса. Для веб-приложения я пытаюсь нарисовать граф, ориентированный на силу. Я пробовал последние несколько часов, чтобы заставить его работать. Я смотрел много разных примеров кода, и то, что я делаю, выглядит очень похоже. В конечном итоге я получил узлы для рисования, но ссылки между узлами не отображаются, и я пробовал разные вещи, и ничего не работает. Я не знаю, почему мой код не рисовал края.

Отпечатав узлы и ссылки на консоль, я увидел, что узлы получили дополнительные атрибуты, такие как d3 docs, упомянутые, но ссылки никогда, кажется, не получают эти атрибуты. Ниже представлен мой файл 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, что устраняет эти проблемы.