Javascript 在D3树布局中使用多种链接类型

我使用树布局在D3V3中构建了一个复杂的图表。我的图表通常有一个树形结构，所以我使用对角线链接，如下所示：

var diagonal = d3.svg.diagonal()
  .projection(function (d) {
    return [d.x, d.y];
  });

var radialDiagonal = d3.svg.diagonal.radial()
  .projection(function (d) {
    return [d.y, d.x / 180 * Math.PI];
  });

但是，对于我的图表中的一些节点，我有一种不同类型的节点，它显示它们的父节点的属性。因此，我希望它们与父节点非常接近，而不是与其他子节点处于同一级别。我认为一个可能的解决方案是使用径向连杆，如下所示：

var diagonal = d3.svg.diagonal()
  .projection(function (d) {
    return [d.x, d.y];
  });

var radialDiagonal = d3.svg.diagonal.radial()
  .projection(function (d) {
    return [d.y, d.x / 180 * Math.PI];
  });

但是，我找不到任何关于如何在图表中使用多种链接类型的示例。有可能这样做吗？或者，是否有任何解决方案使某些节点如此接近其父节点

提前感谢。

我将d3v4+语法用于树，下面的方法可以相对容易地用于v3

这听起来不像是你正在寻找的能够使用不同类型的链接

此处的链接类型，

d3.svg.diaganol

与节点位置无关。链接仅使用某种预定义曲线连接两点。因此，如果要允许节点“非常靠近其父节点，而不是与其他子节点处于同一级别”，则需要操纵节点的位置，而不是实际链接。一种选择是手动移动应该靠近其父节点的节点。在下面的示例中，我使用节点属性（

near

）过滤节点（在运行布局生成器之后），并移动那些应该更靠近其父节点的节点：

 root.descendants().reverse().forEach(function(d) {
  if(d.data.near) d.y = (d.parent.y+d.y)/2;
 })

var data={“name”：“Parent”，“children”：[
{“name”：“Child A”，接近：true，“children”：[
{“姓名”：“孙子A”，近：真}，
{“姓名”：“孙子B”}，
{“姓名”：“孙子C”}
] }, 
{“名称”：“子B”，}，
{“姓名”：“儿童C”，儿童：[
{“name”：“Grandkid D”，near:true}，
{“姓名”：“孙儿E”}
]}
] };
var宽度=400；
var高度=300；
边距={左：50，上：10，右：50，下：10}
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var g=svg.append（“g”）.attr（'transform'，'translate（'+margin.left+'，'+margin.right+'））；
var root=d3.层次结构（数据）；
var tree=d3.tree（）
.尺寸（[高度边距。顶部边距。底部边距。宽度边距。左侧边距。右侧]）；
树（根）
root.subjects（）.reverse（）.forEach（函数（d）{
如果（d.data.near）d.y=（d.parent.y+d.y）/2；
})
var link=g.selectAll（“.link”）
.data（root.links（））
.enter（）.append（“路径”）
.attr（“类”、“链接”）
.attr（“d”，d3.linkHorizontal（）
.x（函数（d）{返回d.y；}）
.y（函数（d）{return d.x；}））；
var node=g.selectAll（“.node”）
.data（根目录下的子目录（））
.enter（）.append（“g”）
.attr（“类”，函数（d）{return“node”+（d.children？“node--internal”：“node--leaf”）；}）
.attr（“transform”，函数（d）{return“translate”（“+d.y+”，“+d.x+”）”）；}）
node.append（“圆”）
.attr（“r”，2.5）；
node.append（“文本”）
.text（函数（d）{return d.data.name；}）
.attr（'y'，-10）
.attr（'x'，-10）
.attr（'text-anchor'，'middle'）
路径{fill:#fff；
笔画：钢蓝；
笔画宽度：3px；
}
.链接{
填充：无；
冲程：#ccc；
笔画宽度：2px；
}

我正在对树使用d3v4+语法，下面的方法相对容易被v3采用

这听起来不像是你正在寻找的能够使用不同类型的链接

此处的链接类型，

d3.svg.diaganol

与节点位置无关。链接仅使用某种预定义曲线连接两点。因此，如果要允许节点“非常靠近其父节点，而不是与其他子节点处于同一级别”，则需要操纵节点的位置，而不是实际链接。一种选择是手动移动应该靠近其父节点的节点。在下面的示例中，我使用节点属性（

near

）过滤节点（在运行布局生成器之后），并移动那些应该更靠近其父节点的节点：

 root.descendants().reverse().forEach(function(d) {
  if(d.data.near) d.y = (d.parent.y+d.y)/2;
 })

var data={“name”：“Parent”，“children”：[
{“name”：“Child A”，接近：true，“children”：[
{“姓名”：“孙子A”，近：真}，
{“姓名”：“孙子B”}，
{“姓名”：“孙子C”}
] }, 
{“名称”：“子B”，}，
{“姓名”：“儿童C”，儿童：[
{“name”：“Grandkid D”，near:true}，
{“姓名”：“孙儿E”}
]}
] };
var宽度=400；
var高度=300；
边距={左：50，上：10，右：50，下：10}
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var g=svg.append（“g”）.attr（'transform'，'translate（'+margin.left+'，'+margin.right+'））；
var root=d3.层次结构（数据）；
var tree=d3.tree（）
.尺寸（[高度边距。顶部边距。底部边距。宽度边距。左侧边距。右侧]）；
树（根）
root.subjects（）.reverse（）.forEach（函数（d）{
如果（d.data.near）d.y=（d.parent.y+d.y）/2；
})
var link=g.selectAll（“.link”）
.data（root.links（））
.enter（）.append（“路径”）
.attr（“类”、“链接”）
.attr（“d”，d3.linkHorizontal（）
.x（函数（d）{返回d.y；}）
.y（函数（d）{return d.x；}））；
var node=g.selectAll（“.node”）
.data（根目录下的子目录（））
.enter（）.append（“g”）
.attr（“类”，函数（d）{return“node”+（d.children？“node--internal”：“node--leaf”）；}）
.attr（“transform”，函数（d）{return“translate”（“+d.y+”，“+d.x+”）”）；}）
node.append（“圆”）
.attr（“r”，2.5）；
node.append（“文本”）
.text（函数（d）{return d.data.name；}）
.attr（'y'，-10）
.attr（'x'，-10）
.attr（'text-anchor'，'middle'）
路径{fill:#fff；
笔画：钢蓝；
笔画宽度：3