如何動態設置連接節點的距離長度？

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 })