Question

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

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

    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.linkHorizontal等） - 使用一行：

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]; }) ;

这会保持您的链接正确，下面的代码段应该证明这一点。

＆＃13;

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)];
  }

＆＃13;

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

＆＃13;

如何避免d3径向树图中的弯曲链接？

1 个答案: