javascript - 如何避免 d3 径向 TreeMap 中的弯曲链接？

Question

我正在使用 this code为我的数据获取径向 TreeMap 。但是，我想修改它以避免弯曲链接。相反，我对线性直接连接感兴趣。弯曲的链接使插图不那么复杂，特别是当我们的子节点数量较少时。例如，您可以查看父节点及其与第一层(圆)节点的链接。如何使用直线连接这些连接？

这是我想修改以满足我的需要的代码部分:

    var link = g.selectAll(".link")
   .data(root.links())
    .enter().append("path")
     .attr("class", "link")
      .attr("d", d3.linkRadial()
      .angle(function(d) { return d.x; })
      .radius(function(d) { return d.y; }));

当前函数定义为

 function radialPoint(x, y) {
  return [(y = +y) * Math.cos(x -= Math.PI / 2), y * Math.sin(x)];
} 

谢谢。

Answer 1

要获得线性直接连接，请不要使用路径生成器 - d3.linkRadial(或 d3.linkHorizo​​ntal 等) - 使用直线:

var link = g.selectAll(".link")
    .data(tree(root).links())
    .enter().append("line")
      .attr("class", "link")
      .attr("stroke","#ccc")
      .attr("x1", function(d) { return radialPoint(d.source.x,d.source.y)[0]; })
      .attr("y1", function(d) { return radialPoint(d.source.x,d.source.y)[1]; })
      .attr("x2", function(d) { return radialPoint(d.target.x,d.target.y)[0]; })
      .attr("y2", function(d) { return radialPoint(d.target.x,d.target.y)[1]; }) ;

这将使您的链接保持直截了当，下面的代码片段应证明这一点。

var data = { "name": "Root", "children": [ 
	{ "name": "A", "children": [ {"name": "A-1" }, {"name": "A-2" }, {"name":"A-3"}, {"name":"A-4"}, { "name":"A-5"} ] }, 
	{ "name": "B", "children": [ {"name": "B-1" } ] },
	{ "name": "C" },
	{ "name": "D", "children": [ {"name": "D-1" }, {"name": "D-2" }, {"name": "D-3", "children": [ {"name": "D-3-i"}, {"name":"D-3-ii"} ] } ] },
	{ "name": "E" },
	{ "name": "F" }
	] };

var width = 960;
var height = 500;

margin = {left: 100, top: 100, right: 50, bottom: 50}

var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);
	  
var g = svg.append("g").attr('transform','translate('+ width/2 +','+ height/2 +')');

var root = d3.hierarchy(data);
	  
var tree = d3.tree()
    .size([2 * Math.PI, height/2]);

var link = g.selectAll(".link")
    .data(tree(root).links())
    .enter().append("line")
      .attr("class", "link")
	  .attr("stroke","#ccc")
      .attr("x1", function(d) { return radialPoint(d.source.x,d.source.y)[0]; })
      .attr("y1", function(d) { return radialPoint(d.source.x,d.source.y)[1]; })
	  .attr("x2", function(d) { return radialPoint(d.target.x,d.target.y)[0]; })
	  .attr("y2", function(d) { return radialPoint(d.target.x,d.target.y)[1]; })
		  ;

  var node = g.selectAll(".node")
    .data(root.descendants())
    .enter().append("g")
      .attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); })
	  .attr("transform", function(d) { return "translate(" + radialPoint(d.x, d.y) + ")"; })

  node.append("circle")
      .attr("r", 2.5);
	  
  node.append("text")
     .text(function(d) { return d.data.name; })
	 .attr('y',-10)
	 .attr('x',-10)
	 .attr('text-anchor','middle');
	 
 

  function radialPoint(x, y) {
	return [(y = +y) * Math.cos(x -= Math.PI / 2), y * Math.sin(x)];
  }
		

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>