d3强制定向布局 - 链接距离优先级

Question

在d3中使用强制定向布局，如何使链接距离成为优先级，同时仍保持漂亮的图形布局？

如果我指定动态链接距离，但保留默认费用，我的图形距离会被充电函数变形一点，并且不再是准确的距离：

但是，如果我删除了费用，图表看起来像这样：

任何建议表示赞赏！

Answer 1

如果我理解正确，我相信有一个潜在的解决方案。

要使链接距离准确，您需要将电荷和碰撞力设置为零，但正如图像所示，那么节点之间的间隔不会影响其他节点，只是它们的节点与...分享链接。由于d3.force初始化在叶序排列中没有x，y值的节点，链接和节点将以非预期的方式聚类。但是，如果在整个模拟过程中施加排斥力，则间距会得到改善，但距离会变形。

可能的解决方案是最初使用排斥力，因为您需要根据链接将节点分成可识别的群集。然后，在它们分离后，将排斥力减小到零，以便施加的唯一力与所需的链接距离相关。

这要求您在图形演变时修改刻度函数中的力。这还要求所有链接距离彼此兼容（节点的三角形不能将两个角分开100个像素，剩下的角连接到另外两个10个像素）。

这样的事情可能在简单的情况下在tick函数中起作用：

var alpha = this.alpha();   // starts at 1 by default, simulation ends at zero

var chargeStrength; // a multiplier for charge strength

if ( alpha > 0.2 ) {
    chargeStrength = (alpha - 0.2 / 0.8); // decrease for the first portion of the simulation
}
else {
    chargeStrength = 0; // leave at zero and give the link distance force time to work without competing forces
}

对于更复杂的可视化，您可以通过减少alphaDecay来为冷却留出更多时间，或者为更简单的可视化增加它。

我在这里做了一个简单的例子，在可视化结束时记录了距离（我在下面的片段中增加了alphaDecay，以精确度为代价加快速度，但它＆＃39;仍然相当不错）并以所需距离参考。

＆＃13;

＆＃13;

var graph = {
  nodes: d3.range(15).map(Object),
  links: [
    {source:  0, target:  1, distance: 20 },
    {source:  0, target:  2, distance: 40},
    {source:  0, target:  3, distance: 80},
    {source:  1, target:  4, distance: 20},
    {source:  1, target:  5, distance: 40},
    {source:  1, target:  6, distance: 80},
    {source:  2, target:  7, distance: 12},
    {source:  2, target:  8, distance: 8},
    {source:  2, target:  9, distance: 6},
    {source:  3, target:  10, distance: 10},
    {source:  3, target:  11, distance: 10},
    {source:  3, target:  12, distance: 2},
	{source:  3, target:  13, distance: 2},
	{source:  3, target:  14, distance: 2}
  ]
};

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

var color = d3.scaleOrdinal(d3.schemeCategory20);

var simulation = d3.forceSimulation()
    .force("charge", d3.forceManyBody().strength(-30 ))
	.force("link", d3.forceLink().distance(function(d) { return d.distance } ).strength(2) )
    .force("center", d3.forceCenter(width / 2, height / 2))
	.force("collide",d3.forceCollide().strength(0).radius(0))
	.alphaDecay(0.03)
    .velocityDecay(0.4);
	
	
	
  var link = svg.append("g")
      .attr("class", "links")
    .selectAll("line")
    .data(graph.links)
    .enter().append("line")
      .attr("stroke-width", 1);

  var node = svg.append("g")
     .attr("class", "nodes")
    .selectAll("circle")
    .data(graph.nodes)
    .enter().append("circle")
     .attr("r", 3)
	  
 simulation
      .nodes(graph.nodes)
      .on("tick", ticked);

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

  
  
	  
  function ticked() {
	
	var alpha = this.alpha();
	var chargeStrength;

    if ( alpha > 0.2 ) {
		chargeStrength = (alpha - 0.2 / 0.8);
	}
	else {
		chargeStrength = 0;
	}

	this.force("charge", d3.forceManyBody().strength( -30 * chargeStrength ))
	
	
    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; });
		
	// validate:
	if (alpha < 0.001) {
		link.each(function(d,i) {
		
			var a = d.source.x - d.target.x;
			var b = d.source.y - d.target.y;
		    var c = Math.pow(a*a + b*b, 0.5);
			
			console.log("specified length: " + graph.links[i].distance + ", realized distance: " + c );
		})
	}
  }

＆＃13;

.links line {
  stroke: #999;
  stroke-opacity: 0.6;
}

.nodes circle {
  stroke: #fff;
  stroke-width: 1.5px;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
<svg width="500" height="300"></svg>

＆＃13;

＆＃13;

＆＃13;

根据图表的复杂程度，您可能需要定制冷却时间，排斥力强度以及如何在α冷却时更改它，velocityDecay（可能在刻度函数中修改它）和/或距离力本身。