как изменить расстояние между узлами d3 в макете силы

Я много искал в d3 для визуализации. Я могу визуализировать свои данные из базы данных. А теперь я хочу изменить расстояние между разными узлами d3. Существует функция force.linkdistance(), которая используется для указания расстояния между узлами. на данный момент я предоставляю постоянное расстояние 100. Я хочу варьировать это расстояние для каждой ссылки в зависимости от столбца в базе данных. который является числовым столбцом. Я также прилагаю свой код. помогите, если кто может.

    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> 

person user2058285    schedule 18.02.2013    source источник


Ответы (1)


Если вы хотите, чтобы force.linkDistance менялось, используйте функцию, а не константу.

Если расстояние является постоянным, то все ссылки имеют одинаковое расстояние. В противном случае, если расстояние является функцией, то функция оценивается для каждой ссылки (по порядку), передавая ссылку и ее индекс с контекстом this в качестве силового макета; возвращаемое значение функции затем используется для установки расстояния каждой ссылки. Функция оценивается всякий раз, когда запускается макет.

(из https://github.com/d3/d3-3.x-api-reference/blob/master/Force-Layout.md#linkDistance)

Вы также можете поэкспериментировать с передачей функции в force.linkStrength, хотя я подозреваю, что эффект будет незначительным (сам еще не пробовал).

person mrienstra    schedule 26.07.2013