javascript - ejemplos - d3js charts examples

¿Cómo se establece una distancia de enlace fijo con d3 v4

Question

Todos los ejemplos de API parecen ser para v3 todavía. Estoy tratando de entender cómo crear un gráfico de fuerza con enlaces de una distancia fija, como: http://bl.ocks.org/d3noob/5141278

Miré link_distance pero no estoy seguro de cómo aplicarlo: https://github.com/d3/d3-force/blob/master/README.md#link_distance

Creando un gráfico como este:

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

Probé varios combos como:

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

pero sin suerte!

¿Entonces parece que link_distance no se puede arreglar? es un resultado de fuerza y ​​(distancia, lo que sea que sea)

Entonces, ¿cómo aplico strength y distance a los enlaces en d3 v4? ¿Se aplica a la simulación o algo más?

Answer 1

¡Estás casi más cerca de cambiar la distancia en v4! Verifique este cambio, me funciona:

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

Answer 2

puedes intentar sin force(''center'')

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

Answer 3

Ya casi estás ... mira esto, este código funciona para mí ...

Nota: obtengo una longitud de enlaces dinámicamente basada en etiquetas de nodo con este código GetNodeDefaults (d.label) .linkDistance , es decir, puede ser 100 o 200 o 300, etc.

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