SOURCE

console 命令行工具 X clear

                    
>
console
var width = 500;
var height = 500;
var nodes = [
  {name:"111"},
  {name:"aaa"},
  {name:"bbb"},
];
var links = [
  {source:0,target:1},
  {source:0,target:2},
];
 var simulation = d3.forceSimulation()
 .force("link", d3.forceLink()
                .distance(function(d) { 
                    return 100;
                })
              )
        .force("charge", d3.forceManyBody())
        .force("center", d3.forceCenter(width / 2, width / 2))
        .force("x", d3.forceX(width/2))
        .force("y", d3.forceY(width/2));

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

    simulation.force("link")
        .links(links);
var svg = d3.select("#forceBox").append("svg")
.attr("width",width)
.attr("height",height);
var gDraw = svg.append("g");
var link = gDraw.append("g")
        .attr("class", "link")
        .selectAll("line")
        .data(links)
        .enter().append("line")
        .attr("stroke-width", "1")
				.attr("stroke","#000");

    var node = gDraw.append("g")
        .attr("class", "node")
        .selectAll("circle")
        .data(nodes)
        .enter().append("circle")
        .attr("r", 5)
        .attr("fill", "red");


    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("cx", function(d) { return d.x; })
            .attr("cy", function(d) { return d.y; });
    }
function changeDistance(){
  let val = $("#forceDis").val();
  $('#rengeVal').html(val);
  simulation.force("link", d3.forceLink()
                .distance(function(d) { 
                    return val;
                })
              )
  simulation.restart();
  
}
<div id="view">
  <div id="controlBox">
  <input type="range" id="forceDis" max='100' min='0' onChange="changeDistance()"/>
    <label for="forceDis">连线距离<span id='rengeVal'></span></label>
</div>
<div id="forceBox">
  
</div>
</div>
<script src="https://d3js.org/d3.v4.min.js"></script>
#view{
  width:800px;
}
#controlBox{
  width:200px;
  height:500px;
  background:#1475dc;
  float:left;
  font-size:12px;
  color:#fff;
}
#forceBox{
  width:500px;
  height:500px;
  background:#fff;
  float:left;
}