Javascript 编辑D3 SVG'；s链接在a中的位置；径向的；图表

我遇到了一个我没有成功解决的问题，在本例中，我想从矩形的中间开始移动链接，将它们放在最末端，这样PUB-2和PUB-3就不会相互交叉。如果可能，可以展开第一层，并默认关闭另一层

有什么想法吗？这是源代码（d3网站）和工作代码笔（），在其中，我使用第126行上的代码bellow+链接间距将原始圆圈更改为矩形：

  nodeEnter.append("rect")
      .attr("width", 75)
      .attr("height", 20)
      .attr("x", -10)
      .attr("y", -10)
      .style("fill", function(d) { return d._children ? "lightsteelblue" : "red"; });

---

以下是修复链接的方法：

首先，更改矩形的位置，使其位于标准链接节点图中圆的中心位置。我没有在

update

函数中硬编码值，而是在对象中配置了矩形尺寸：

var rect = {l: 60, w: 20};

编辑矩形属性以使用

rect

中的值，并通过将

x

和

y

值分别偏移矩形长度的一半和宽度的一半，将矩形居中放置在节点上

nodeEnter.append("rect")
  .attr("width", rect.l)  // long dimension
  .attr("height", rect.w) // short dimension
  .attr("x", -rect.l/2)   // offset by half the long dimension
  .attr("y", -rect.w/2)   // offset by half the short dimension
  .style("fill", function(d) {
    return d._children ? "lightsteelblue" : "red";
  });

要修复链接，我们需要将它们的开始和结束位置更改为相同的偏移量。由于退出和进入链接都使用源节点的位置，因此我们需要担心的唯一链接是更新选择：

link.transition()
  .duration(duration)
  .attr("d", diagonal);

对角线

采用以下形式的对象

{ source: { x: 123, y: 456 }, target: { x: 234, y: 567 } }

在更新选择的情况下，数据项已经在此配置中，因此调用

对角线（d）

可以正常工作。因为我们要修改坐标以包含矩形的偏移量，所以我们必须中断

对角线调用。请注意，投影将切换
x
和
y
坐标，因此我们必须更改
y
值：

  link.transition()
    .duration(duration)
    .attr("d", function(d){
      return diagonal({
      source: {x: d.source.x, y: d.source.y + rect.l/2}, // add half the rectangle length
      target: {x: d.target.x, y: d.target.y - rect.l/2}  // minus half the rectangle length
    })
  });

我还通过删除您添加的偏移量并将文本锚定设置为“中间”来自由地将文本居中于矩形中

结果如下：


var酒吧=
{
“名称”：“AUT-1”，
“儿童”：[
{
“姓名”：“PUB-1”、“儿童”：[
{“姓名”：“AUT-11”，“儿童”：[
{“名称”：“AFF-111”}，
{“名称”：“AFF-112”}
]},
{“姓名”：“AUT-12”，“儿童”：[
{“名称”：“AFF-121”}
]},
{“姓名”：“AUT-13”，“儿童”：[
{“姓名”：“AFF-131”}，
{“名称”：“AFF-132”}
]},
{“姓名”：“AUT-14”，“儿童”：[
{“名称”：“AFF-141”}
]}
]
},
{
“姓名”：“第二酒吧”、“儿童”：[
{“名称”：“AUT-21”}，
{“名称”：“AUT-22”}，
{“名称”：“AUT-23”}，
{“名称”：“AUT-24”}，
{“名称”：“AUT-25”}，
{“名称”：“AUT-26”}，
{“名称”：“AUT-27”}，
{“姓名”：“AUT-28”，“儿童”：[
{“姓名”：“AFF-281”}，
{“姓名”：“AFF-282”}，
{“姓名”：“AFF-283”}，
{“姓名”：“AFF-284”}，
{“姓名”：“AFF-285”}，
{“姓名”：“AFF-286”}
]}
]
},
{“名称”：“PUB-3”}，
{
“姓名”：“第四酒吧”，“儿童”：[
{“名称”：“AUT-41”}，
{“名称”：“AUT-42”}，
{“姓名”：“AUT-43”，“儿童”：[
{“姓名”：“AFF-431”}，
{“姓名”：“AFF-432”}，
{“姓名”：“AFF-433”}，
{“姓名”：“AFF-434”，“儿童”：[
{“名称”：“ADD-4341”}，
{“名称”：“ADD-4342”}，
]}
]},
{“名称”：“AUT-44”}
]
},
{
“姓名”：“第五酒吧”、“儿童”：[
{“姓名”：“AUT-51”，“儿童”：[
{“姓名”：“AFF-511”}，
{“名称”：“AFF-512”}，
{“姓名”：“AFF-513”}，
{“姓名”：“AFF-514”}，
{“姓名”：“AFF-515”}，
{“名称”：“AFF-516”}
]},
{“名称”：“AUT-52”}，
{“名称”：“AUT-53”}，
{“名称”：“AUT-54”}，
{“姓名”：“AUT-55”，“儿童”：[
{“姓名”：“AFF-551”}，
{“姓名”：“AFF-552”}，
{“姓名”：“AFF-553”}，
{“名称”：“AFF-554”}
]},
{“名称”：“AUT-56”}，
{“名称”：“AUT-57”}，
{“名称”：“AUT-58”}，
{“名称”：“AUT-59”}，
{“名称”：“AUT-591”}，
{“名称”：“AUT-592”}，
{“名称”：“AUT-593”}，
{“名称”：“AUT-594”}，
{“名称”：“AUT-595”}，
{“名称”：“AUT-596”}
]
},
{
“姓名”：“第六酒吧”，“儿童”：[
{“姓名”：“AUT-61”，“儿童”：[
{“名称”：“AFF-611”}，
{“名称”：“AFF-612”}，
{“姓名”：“AFF-613”}，
{“姓名”：“AFF-614”，“儿童”：[
{“名称”：“ADD-6141”}，
{“名称”：“ADD-6142”}，
]}
]},
{“名称”：“AUT-62”}，
{“名称”：“AUT-63”}，
{“名称”：“AUT-64”}，
{“名称”：“AUT-65”}，
{“名称”：“AUT-66”}，
{“名称”：“AUT-67”}，
{“名称”：“AUT-68”}，
{“名称”：“AUT-69”}
]
}
]
};
var直径=800；
var margin={顶部：20，右侧：120，底部：20，左侧：120}，
宽度=直径，
高度=直径；
var i=0，
持续时间=350，
根；
var tree=d3.layout.tree（）
.尺寸（[360，直径/2-80]）
.separation（函数（a，b）{return（a.parent==b.parent？1:1）/a.depth；}）；
var diagonal=d3.svg.diagonal.radial（）
.投影（功能（d）
if (nodes[0].x > 180) {
  nodes[0].x = nodes[0].x - 90
} 
else {
  nodes[0].x = nodes[0].x + 90
}