Увеличьте длину ссылки в графе узловых ссылок, используя d3

Question

Как я могу увеличить длину ссылки в графе сил. Мой код написан ниже. Что я должен изменить?

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script>
  var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

  // Add lines for every link in the dataset
  var link = svg.append("g")
    .attr("class", "links")
    .selectAll("line")
    .data(graph.links)
    .enter().append("line")
    .attr("stroke-width", function(d) {
      return Math.sqrt(d.value);
    });

  // Add circles for every node in the dataset
  var node = svg.append("g")
    .attr("class", "nodes")
    .selectAll("circle")
    .data(graph.nodes)
    .enter().append("circle")
    //   .style("fill", function (d) { return '#1f77b4'; })
    .attr("r", 10)
    .attr("fill", function(d) {
      return '#aec7e8';
    })
    // .attr("fill", function(d) { return color(d.group); })
    .call(d3.drag()
      .on("start", dragstarted)
      .on("drag", dragged)
      .on("end", dragended)
    );

  // Basic tooltips
  node.append("title")
    .text(function(d) {
      return d.id;
    });

  // Attach nodes to the simulation, add listener on the "tick" event
  simulation
    .nodes(graph.nodes)
    .on("tick", ticked);

  // Associate the lines with the "link" force
  simulation.force("link")
    .links(graph.links)
</script>

Я хотел, чтобы читатель ясно видел визуализацию. Это потому, что визуализация узла очень близка друг к другу.

Answer 1

Попробуйте изменить .strength() из d3.forceManyBody() на более крупные значения

---

.force("charge", d3.forceManyBody().strength(-3));

---

.force("charge", d3.forceManyBody().strength(-30));