如何动态设置连接节点的距离长度？

Question

这里我试图配置连接节点，以便每个节点的连接线的长度由数据集配置。

这是线路在哪里设定的长度：

.linkDistance([dataset.edges[0].distance]) 

这设置所有连接的节点线长度相同的值，但如何配置，以便它读取当前节点的距离参数，而不是将所有行的长度，以dataset.edges[0].distance？

我认为需要遍历每个距离数据集并应用于节点？

小提琴：https://jsfiddle.net/7pvhxfzg/30/

源：

var w = 500; 
var h = 300; 
var dataset = { 
    nodes:[ 
      {name:"Adam"}, 
      {name:"Bob"}, 
      {name:"Carrie"}, 
      {name:"Donovan"}, 
      {name:"Edward"}, 
      {name:"Felicity"}, 
      {name:"George"}, 
      {name:"Hannah"}, 
      {name:"Iris"}, 
      {name:"Jerry"} 
    ], 
    edges:[ 
      {source: 0, target: 1, distance: 200}, 
      {source: 0, target: 1, distance: 200}, 
      {source: 0, target: 3, distance: 200}, 
      {source: 0, target: 4, distance: 200}, 
      {source: 1, target: 5, distance: 200} 
    ] 
}; 
var force = d3.layout.force() 
         .nodes(dataset.nodes) 
         .links(dataset.edges) 
         .size([w, h]) 
         .linkDistance([dataset.edges[0].distance]) 
         .charge([-150]) 
         .start(); 

var colors = d3.scale.category10(); 
var svg = d3.select("body") 
       .append("svg") 
       .attr("width", w) 
       .attr("height", h); 
var edges = svg.selectAll("line") 
       .data(dataset.edges) 
       .enter() 
       .append("line") 
       .style("stroke", "#ccc") 
       .style("stroke-width", 5); 
var nodes = svg.selectAll("circle") 
       .data(dataset.nodes) 
       .enter() 
       .append("circle") 
       .attr("r", 10) 
       .style("fill", function(d, i){ 
        return colors(i); 
       }) 
       .call(force.drag); 

var label = svg.selectAll(".mytext") 
       .data(dataset.nodes) 
       .enter() 
       .append("text") 
       .text(function (d) { return d.name; }) 
       .style("text-anchor", "middle") 
       .style("fill", "#555") 
       .style("font-family", "Arial") 
       .style("font-size", 12); 



force.on("tick", function(){ 
    edges.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; }); 
    nodes.attr("cx", function(d){ return d.x; }) 
     .attr("cy", function(d){ return d.y; }); 
    label.attr("x", function(d){ return d.x; }) 
     .attr("y", function (d) {return d.y - 10; }); 


}); 

更新了答案：

var w = 500; 
var h = 300; 
var dataset = { 
    nodes:[ 
      {name:"Adam"}, 
      {name:"Bob"}, 
      {name:"Carrie"}, 
      {name:"Donovan"}, 
      {name:"Edward"}, 
      {name:"Felicity"}, 
      {name:"George"}, 
      {name:"Hannah"}, 
      {name:"Iris"}, 
      {name:"Jerry"} 
    ], 
    edges:[ 
      {source: 0, target: 1, distance: 200}, 
      {source: 0, target: 1, distance: 200}, 
      {source: 0, target: 3, distance: 100}, 
      {source: 0, target: 4, distance: 200}, 
      {source: 1, target: 5, distance: 200} 
    ] 
}; 
var force = d3.layout.force() 
         .nodes(dataset.nodes) 
         .links(dataset.edges) 
         .size([w, h]) 
         .linkDistance(function(link) { return link.distance }) 
         .charge([-150]) 
         .start(); 

var colors = d3.scale.category10(); 
var svg = d3.select("body") 
       .append("svg") 
       .attr("width", w) 
       .attr("height", h); 
var edges = svg.selectAll("line") 
       .data(dataset.edges) 
       .enter() 
       .append("line") 
       .style("stroke", "#ccc") 
       .style("stroke-width", 5); 
var nodes = svg.selectAll("circle") 
       .data(dataset.nodes) 
       .enter() 
       .append("circle") 
       .attr("r", 10) 
       .style("fill", function(d, i){ 
        return colors(i); 
       }) 
       .call(force.drag); 

var label = svg.selectAll(".mytext") 
       .data(dataset.nodes) 
       .enter() 
       .append("text") 
       .text(function (d) { return d.name; }) 
       .style("text-anchor", "middle") 
       .style("fill", "#555") 
       .style("font-family", "Arial") 
       .style("font-size", 12); 



force.on("tick", function(){ 
    edges.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; }); 
    nodes.attr("cx", function(d){ return d.x; }) 
     .attr("cy", function(d){ return d.y; }); 
    label.attr("x", function(d){ return d.x; }) 
     .attr("y", function (d) {return d.y - 10; }); 


}); 

小提琴：https://jsfiddle.net/7pvhxfzg/32/

Answer 1

力布局的linkDistance()接受一个函数作为它的参数，在它是哪种情况ls每个链接起作用，传入相关链接（请参阅docs）。所以你可以从那里得到距离：

.linkDistance(function(link) { return link.distance })