Javascript 如何在force布局中改变d3节点之间的距离

我在d3中搜索了很多关于可视化的内容。我能够从数据库中可视化我的数据。现在，我想改变不同d3节点之间的距离。有一个函数force.linkdistance（）用于指定节点之间的距离。目前，我提供的恒定距离为100。我想根据数据库中的列改变每个链接的距离。这是一个数字列。我附上我的代码也。如果有人能帮忙，请帮忙。

var-okCounter=0；
可变宽度=960，
高度=500；
log（“这里仍然可以：，okCounter++”）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
log（“这里仍然可以：，okCounter++”）；
var-force=d3.layout.force（）
.重力（.05）
.距离（100）
。收费（-100）
.尺寸（[宽度、高度]）；
log（“这里仍然可以：，okCounter++”）；
json（“getdata.php”，函数（错误，json）{
力
.nodes（json.nodes）
.links（json.links）
.start（）；
log（“这里仍然可以：，okCounter++”）；
var link=svg.selectAll（“.link”）
.data（json.links）
.enter（）.append（“路径”）
.attr（“类”、“链接”）；
log（“这里仍然可以：，okCounter++”）；
var node=svg.selectAll（“.node”）
.data（json.nodes）
.enter（）.append（“g”）
.attr（“类”、“节点”）
//.呼叫（强制拖动）；
log（“这里仍然可以：，okCounter++”）；
node.append（“图像”）
.attr（“xlink:href，”http://www.clker.com/cliparts/5/6/3    /a/1194984675331456830联合国宪章（01.svg.med.png）
.attr（“x”，-8）
.attr（“y”，-8）
.attr（“宽度”，24）
.attr（“高度”，24）；
log（“这里仍然可以：，okCounter++”）；
node.append（“文本”）
.attr（“dx”，24）
.attr（“dy”，“.35em”）
.text（函数（d）{返回d.name}）；
log（“这里仍然可以：，okCounter++”）；
force.on（“勾号”，函数（）{
link.attr（“d”，函数（d）{
变量dx=d.target.x-d.source.x，
dy=d.target.y-d.source.y，
dr=Math.sqrt（dx*dx+dy*dy）；
返回“M”+d.source.x+”、“+d.source.y+”A“+dr+”、“+dr+”0,1“+d.target.x+”、“+d.target.y”；
});
log（“这里仍然可以：，okCounter++”）；
attr（“transform”，函数（d）{return“translate”（“+d.x+”，“+d.y+”）”）；}）；
});
}); 

如果您想改变

强制.linkDistance

，请使用函数而不是常量

如果距离是常数，则所有链接的距离都相同。否则，如果距离是一个函数，则对每个链接（按顺序）计算该函数，并将链接及其索引传递给

此
上下文作为力布局；然后使用函数的返回值设置每个链接的距离。每当布局开始时，都会对函数进行求值

（来自）

您可能还希望尝试将函数传递给
force.linkStrength
，尽管我怀疑效果会很微妙（我自己还没有尝试过）

    var okCounter=0;
var width = 960,
height = 500;

console.log("still ok here:",okCounter++);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
console.log("still ok here:",okCounter++);
var force = d3.layout.force()
    .gravity(.05)
    .distance(100)
    .charge(-100)
    .size([width, height]);
console.log("still ok here:",okCounter++);
d3.json("getdata.php", function(error,json) {
   force
      .nodes(json.nodes)
      .links(json.links)
      .start();
console.log("still ok here:",okCounter++);
  var link = svg.selectAll(".link")
      .data(json.links)
      .enter().append("path")
      .attr("class", "link");
console.log("still ok here:",okCounter++);
  var node = svg.selectAll(".node")
      .data(json.nodes)
    .enter().append("g")
      .attr("class", "node")
     // .call(force.drag);
console.log("still ok here:",okCounter++);
  node.append("image")
      .attr("xlink:href", "http://www.clker.com/cliparts/5/6/3    /a/1194984675331456830utente_singolo_architett_01.svg.med.png")
      .attr("x", -8)
      .attr("y", -8)
      .attr("width", 24)
      .attr("height", 24);
console.log("still ok here:",okCounter++);
  node.append("text")
      .attr("dx", 24)
      .attr("dy", ".35em")
      .text(function(d) { return d.name });
console.log("still ok here:",okCounter++);
  force.on("tick", function() {
    link.attr("d", function(d) {
var dx = d.target.x - d.source.x,
    dy = d.target.y - d.source.y,
    dr = Math.sqrt(dx * dx + dy * dy); 
return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " +     d.target.x + "," + d.target.y;
});
console.log("still ok here:",okCounter++);
    node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")";   });
 });
});</script> 

var force = d3.layout.force()
    .linkDistance(function(d) { 
          return(/* whatever computation you want the distance of each link to be */); 
    }
    .start();