d3-force-directed

This question already has an answer here: variable declaration conditional syntax 3 answers I'm relatively new to JavaScript and d3, but I'm really interested in force-directed layouts. In Mike Bostock's force-directed visualizations, he tends to parse nodes from a list of links using the following code (or similar): var links = [ {source: "A", target: "B"}, {source: "B", target: "C"}, {source: "C", target: "A"}]; var nodes = {}; links.forEach(function(link) { link.source = nodes[link.source] || (nodes[link.source] = {name: link.source}); link.target = nodes[link.target] || (nodes[link.target]

Using a force-directed layout in d3, how do I make the link distance a priority, while still keeping a nice graph layout? If I specify dynamic link distances, but keep the default charge, my graph distances are morphed a bit by the charge function, and are no longer accurate distances: However, if I remove the charge, the graph looks like this: Any advice appreciated! If I understand correctly, I believe there is a potential solution. To get link distance to be accurate, you need to set charge and collision forces to zero, but as your image suggests, then nodes aren't spaced in a way that