Как установить фиксированное расстояние связи с d3 v4

Все примеры API, похоже, все еще существуют для v3. Я пытаюсь понять, как создать граф силы с ссылками фиксированного расстояния, например: http://bl.ocks.org/d3noob/5141278

Я посмотрел на link_distance, но не уверен, как его применить: https://github.com/d3/d3-force/blob/master/README.md#link_distance

Создание такого графа:

  let simulation = d3.forceSimulation()
      .force("link", d3.forceLink().id(function(d) { return d.id; }))
      .force("charge", d3.forceManyBody().strength(-150))
      .force("center", d3.forceCenter(width / 2, height / 2));

Я пробовал различные комбо вроде:

  // .force("link", d3.forceLink().distance(20).strength(1))
  // .force("linkDistance", 20)
  // .force("link", d3.forceLink().id(function(d) { return d.id; }))

но не повезло!

Итак, ссылка link_distance не может быть исправлена? его результат силы и (расстояние, что бы это ни было)

Итак, как мне применить strength и distance к ссылкам в d3 v4? Используется ли оно для моделирования или что-то еще?

Ответ 1

Вы почти ближе к изменению расстояния в v4! Проверьте это изменение, оно работает для меня:

    var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) { return d.id; }).distance(100).strength(1))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width / 2, height / 2));

Ответ 2

Вы почти там... проверьте это, этот код работает для меня..

Примечание. Я получаю длину ссылок динамически на основе node ярлыков с этим кодом GetNodeDefaults (d.label).linkDistance, т.е. может быть 100 или 200 или 300 и т.д.

var forceLink = d3
    .forceLink().id(function (d) {
        return d.id;
    })
    .distance(function (d) {
        return GetNodeDefaults(d.label).linkDistance;
    })
    .strength(0.1);

var simulation = d3.forceSimulation()
    .force("link", forceLink)
    .force("charge", d3.forceManyBody().strength(function (d, i) {
        var a = i == 0 ? -2000 : -1000;
        return a;
    }).distanceMin(200).distanceMax(1000))
    .force("center", d3.forceCenter(width / 2, height / 2))
    .force("y", d3.forceY(0.01))
    .force("x", d3.forceX(0.01))
    .on("tick", ticked);

Ответ 3

вы можете попробовать без force('center')

let simulation = d3.forceSimulation()
  .force("link", d3.forceLink().id(function(d) { return d.id; }))
  .force("charge", d3.forceManyBody().strength(-150));