如何在 d3.js 中调整力有向图的大小？答案

【问题标题】：how to adjust size of force directed graph in d3.js?如何在 d3.js 中调整力有向图的大小？
【发布时间】：2018-04-09 04:13:40
【问题描述】：

我已经实现了一个力导向图，它可以可视化国家之间的共享边界。图形的布局超出了 svg 边界，有没有办法调整图形大小，使图形布局保持在图形边界内。模拟的大小可以是预先设置以适应窗口宽度和高度的变化？

link to codepen

let request = new XMLHttpRequest();
request.addEventListener("load", loaded);

function loaded() {
  const data = JSON.parse(request.responseText);

  var nodes = data.nodes;
  var links = data.links;

  // sets up svg
  var svg = d3.select("svg"),
      width = +svg.attr("width"),
      height = +svg.attr("height");

  // handle color of the nodes i gueess,gotta know what schemeCategory method does
  var color = d3.scaleOrdinal(d3.schemeCategory20);

  // starts simulation
  var simulation = d3

  .forceSimulation()
  .force("link", d3.forceLink())

  .force("charge", d3.forceManyBody())
  .force("center", d3.forceCenter(width /2, height / 2))


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

  //creates nodes..for this example,you need to set node to images
  var node = svg
  .append("g")
  .attr("class", "nodes")
  .selectAll(".node")
  //pass node data
  .data(nodes)
  .enter()
.append("image")
      .attr("xlink:href",function(d){return "https://cdn.rawgit.com/hjnilsson/country-flags/master/svg/"+d.code+".svg" })
      .attr("x", -8)
      .attr("y", -8)
      .attr("width", 16)
      .attr("height", 16)



  .call(
    d3
    .drag()
    .on("start", dragstarted)
    .on("drag", dragged)
    .on("end", dragended)
  );



  node.append("title")
      .text(function(d) { return d.country; });

  simulation.nodes(nodes).on("tick", ticked);

  simulation.force("link").links(links);

  function ticked() {
    link
      .attr("x1", function(d) {
      return d.source.x;
    })
      .attr("y1", function(d) {
      return d.source.y;
    })
      .attr("x2", function(d) {
      return d.target.x;
    })
      .attr("y2", function(d) {
      return d.target.y;
    });

    node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });


  }

  function dragstarted(d) {
    if (!d3.event.active) simulation.alphaTarget(0.3).restart();
    d.fx = d.x;
    d.fy = d.y;
  }

  function dragged(d) {
    d.fx = d3.event.x;
    d.fy = d3.event.y;
  }

  function dragended(d) {
    if (!d3.event.active) simulation.alphaTarget(0);
    d.fx = null;
    d.fy = null;
  }
}
request.open(
  "GET",
  "https://www.cs.mun.ca/~h65ped/Public/country%20data%20for%20force%20directed%20graph/countries.json",
  true
);
request.send(null);

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

内置d3.forceManyBody 的吸引力可以用strength() 方法修改，所以试试类似

  // starts simulation
  var simulation = d3
  .forceSimulation()
  .force("link", d3.forceLink())
  .force("charge", d3.forceManyBody().strength(-5))
  .force("center", d3.forceCenter(width /2, height / 2))

如果这对其他项目的约束过于紧密，那么您将不得不实现自己的 force 方法，该方法可以根据 SVG 大小来约束项目。请参阅 d3.force 了解幕后发生的事情以及如何生成自己的函数。

【讨论】：