d3 - 图形网络节点链接间距

Question

所以我正在使用 d3 网络图，但不知道如何在我的节点和链接之间获得更大的间距。 margin 和 padding 无效，它们是 css 中主要的间距功能。 jsfiddle 是here。代码如下：

   <script>
    var network = {
            "nodes":[
              {"name":"Sensor Operater","group":1},
              {"name":"Linguist","group":2},
              {"name":"Report Writer","group":3},
              {"name":"Mission Manager","group":4},
              {"name":"Shift Supervisor","group":5},
              {"name":"Geo-location","group":6},
              {"name":"COMINT (Internal)","group":7},
              {"name":"COMINT (External)","group":8},
              {"name":"ELINT","group":9}

            ],
             "links":[
             {"source":6,"target":0,"weight":1},
              {"source":6,"target":1,"weight":1},
              {"source":6,"target":2,"weight":1},
              {"source":6,"target":3,"weight":1},
              {"source":6,"target":4,"weight":1},
              {"source":7,"target":2,"weight":1},
              {"source":7,"target":3,"weight":1},
              {"source":5,"target":0,"weight":1},
              {"source":5,"target":2,"weight":1},
              {"source":8,"target":2,"weight":1}

            ]
          }

var width = 960,
    height = 500

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var force = d3.layout.force()
    .gravity(0.05)
    .distance(100)
    .charge(-100)
    .size([width, height]);

  force
      .nodes(network.nodes)
      .links(network.links)
      .start();

  var link = svg.selectAll(".link")
      .data(network.links)
    .enter().append("line")
      .attr("class", "link")
    .style("stroke-width", function(d) { return Math.sqrt(d.weight); });

  var node = svg.selectAll(".node")
      .data(network.nodes)
    .enter().append("g")
      .attr("class", "node")
      .call(force.drag);

  node.append("circle")
      .attr("r","5");

  node.append("text")
      .attr("dx", 12)
      .attr("dy", ".35em")
      .text(function(d) { return d.name });

  force.on("tick", function() {
    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 + ")"; });

});
</script>
<style>
        .link {
     stroke: #ccc;
      margin:100px;
    }

    .node text {
    stroke:#333;
    cursor:pointer;
    margin:100px;
    }

    .node circle{
    stroke: steelblue;
    stroke-width:3px;
    fill:#555;
    margin:100px;
    }
</style>

Answer 1

您应该更改force 的distance 方法：

var force = d3.layout.force()
    .gravity(0.05)
    .distance(100) // <== !!!
    .charge(-100)
    .size([width, height]);

我修改了您的示例并添加了一个范围滑块，尝试更改它，您将看到节点之间的间距将更改。

我在滑块值更改后更新distance方法并重新启动力模拟：

var rangeSlider = document.getElementById('myRange');

rangeSlider.addEventListener('change', function(event,a,b) {
    force.distance(event.target.value).start();
});

在下面的演示中尝试一下：

var network = {
            "nodes":[
              {"name":"Sensor Operater","group":1},
              {"name":"Linguist","group":2},
              {"name":"Report Writer","group":3},
              {"name":"Mission Manager","group":4},
              {"name":"Shift Supervisor","group":5},
              {"name":"Geo-location","group":6},
              {"name":"COMINT (Internal)","group":7},
              {"name":"COMINT (External)","group":8},
              {"name":"ELINT","group":9}

            ],
             "links":[
             {"source":6,"target":0,"weight":1},
              {"source":6,"target":1,"weight":1},
              {"source":6,"target":2,"weight":1},
              {"source":6,"target":3,"weight":1},
              {"source":6,"target":4,"weight":1},
              {"source":7,"target":2,"weight":1},
              {"source":7,"target":3,"weight":1},
              {"source":5,"target":0,"weight":1},
              {"source":5,"target":2,"weight":1},
              {"source":8,"target":2,"weight":1}
              
            ]
          }

var width = 960,
    height = 500

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var rangeSlider = document.getElementById('myRange');
rangeSlider.addEventListener('change', function(event,a,b) {
	force.distance(event.target.value).start();
})
var force = d3.layout.force()
    .gravity(0.05)
    .distance(rangeSlider.value)
    .charge(-100)
    .size([width, height]);

  force
      .nodes(network.nodes)
      .links(network.links)
      .start();

  var link = svg.selectAll(".link")
      .data(network.links)
    .enter().append("line")
      .attr("class", "link")
    .style("stroke-width", function(d) { return Math.sqrt(d.weight); });

  var node = svg.selectAll(".node")
      .data(network.nodes)
    .enter().append("g")
      .attr("class", "node")
      .call(force.drag);

  node.append("circle")
      .attr("r","5");

  node.append("text")
      .attr("dx", 12)
      .attr("dy", ".35em")
      .text(function(d) { return d.name });

  force.on("tick", function() {
    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 + ")"; });

});

.link {
 stroke: #ccc;
  margin:100px;
}

.node text {
stroke:#333;
cursor:pointer;
margin:100px;
}

.node circle{
stroke: steelblue;
stroke-width:3px;
fill:#555;
margin:100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<h1>
 Hello Network
</h1>
<div class="slidecontainer">
  <input type="range" min="20" max="500" value="100" class="slider" id="myRange">
</div>
</html>

实际上，charge 和 gravity 等其他参数也会影响节点位置，您可以使用它们并找到最适合您的情况。