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

您应该更改distance的<{1}}方法：

force

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

在滑块值更改和重新启动力模拟后更新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等其他参数也会对节点位置产生影响，您可以使用它们并找到最适合您的情况。