如何在TreeView D3.js中调整路径链接

var根；
var boxWidth=160，
箱高=40，
持续时间=750；//转换持续时间（毫秒）
var diagonal=d3.svg.diagonal（）
.投影（功能（d）{
返回[d.y+70，d.x]；
});
//设置缩放和平移
/*var zoom=d3.behavior.zoom（）
.scaleExtent（[1,1]）
.on（'zoom'，function（）{
attr（“transform”、“translate”（+d3.event.translate+））比例（+d3.event.scale+）；
})
//偏移，以便第一次平移和缩放不会跳回原点
.翻译（[150200]）*/
var svg=d3.选择（#infovis”）.追加（“svg”）
.attr（'preserveAspectRatio'，“xMinYMin-meet”）
.attr（'视图框'，“0 0 800 650”）
/*.呼叫（缩放）*/
.append（'g'）
//树的左侧填充，以便整个根节点都显示在屏幕上。
//TODO:找到更好的方法
.attr（“转换”、“翻译（100250）”）；
var tree=d3.layout.tree（）
//使用nodeSize，我们可以控制
//节点之间的分离。如果我们使用
//而d3将使用size参数
//动态计算要填充的间距
//可用空间。
.nodeSize（[100200]）
//默认情况下，表兄弟姐妹之间的距离比兄弟姐妹远。
//通过在所有情况下返回相同的值，我们可以绘制表兄妹
//与兄弟姐妹之间的距离相同。
.分离（职能（{
回报5；
})
//告诉d3子节点是什么。记住，我们在画画
//一棵树，使祖先成为子节点。
.儿童（功能（人）{
//如果伤者昏倒，则告知d3
//他们没有祖先。
如果（人崩溃）{
返回；
}否则{
返回人。\u父母；
}
});
var json=//不支持ablepasete数据
var jsonFromController=$（“#treeViewJsonStr”）.val（）；
if（jsonFromController）{
试一试{
if（jsonFromController！=“未找到结果”）{
json=jQuery.parseJSON（jsonFromController）；
json._parents.forEach（函数（gen2）{
塌陷（gen2）；
});
root=json；
root.x0=0；
root.y0=0；
画（根）；
}否则{
$（“#infovis”）.html（“

”+jsonFromController）；
}
}捕获（e）{
控制台日志（e）；
}
}
功能点击（d）{
如果（d.儿童）{
d、 _children=d.children；
d、 children=null；
}否则{
d、 儿童=d.\U儿童；
d、 _children=null；
}
如果（d.父母）{
d、 parent.children.forEach（函数（元素）{
如果（d！==元素）{
塌陷（元素）；
}
});
}
//更新（d）；
}
函数绘制（源）{
var nodes=tree.nodes（root）.reverse（），
链接=树。链接（节点）；
nodes.forEach（函数（d）{
d、 y=d.深度*250；
});
//更新链接–alpha
var link=svg.selectAll（“path.link”）
.数据（链接、功能（d）{
返回d.target.id；
});
//在父对象的上一个位置输入任何新链接。
link.enter（）插入（“路径”，“g”）
.attr（“类”、“链接”）
.attr（“x”，箱宽）
.attr（“y”，箱高）
.attr（“d”，函数（d）{
变量o={
x:source.x0，
y:source.y0
};
返回对角线({
资料来源：o，
目标：o
});
});
//过渡链接到他们的新位置。
link.transition（）
.持续时间（持续时间）
.attr（“d”，对角线）；
//将退出节点转换到父节点的新位置。
link.exit（）.transition（）
.持续时间（持续时间）
.attr（“d”，函数（d）{
变量o={
x:source.x，
y:来源，y
};
返回对角线({
资料来源：o，
目标：o
});
})
.remove（）；
//将旧位置隐藏起来，以便过渡。
nodes.forEach（函数（d）{
d、 x0=d.x；
d、 y0=d.y；
});
//更新节点
var node=svg.selectAll（“g.person”）
//我们正在传递的函数为d3提供了一个id
//这样它就可以跟踪数据的添加和删除时间。
//如果只绘制一次树，则无需执行此操作
//如基本示例所示。
.data（节点、函数（person）{return person.id；}）；
//添加任何新节点
var nodeEnter=node.enter（）.append（“g”）
.attr（“类”、“人”）
//在其子框的右侧添加新节点。
//他们将被转移到适当的位置。
.attr（'transform'，函数（person）{
返回“translate（'+source.y0+'，'+source.x0+'）；
})
.on（'click'，togglePerson）；
//绘制矩形人物框。
//启动大小为0的新框，以便
//我们可以把它们改成合适的尺寸。
nodeEnter.append（“rect”）
艾特先生({
x:0,，
y:0，
宽度：0，
身高：0
});
nodeEnter.append（“外来对象”）
.attr（“x”，-90）
.attr（“y”，-15）
.attr（“宽度”，160）
.attr（“高度”，10）
.append（“xhtml:tspan”）
.html（函数（d）{
如果（d.类型=“发票”）{
返回“+resizeText（d.name）+”
“+d.amount+”；
}否则如果（d.type==“任务订单”）{
返回“+resizeText（d.name）+”；
}
返回“+resizeText（d.name）+”；
})
.on（'click'，函数（d，i）{
如果（d.type=='Invoice'）{//do stuff
//多斯图夫
loadInvoiceView（d.id、d.status、d.invoiceType）；
}
});
//更新旧节点和新节点的位置
var nodeUpdate=node.transition（）
.持续时间（持续时间）
.attr（“转换”，函数（d）{
返回“translate”（“+（d.y）+”，“+d.x+”）；}）；
//把盒子长到合适的大小
nodeUpdate.select（'rect'）
艾特先生({
x:-（箱宽/2），
y:-（箱高/2），
宽度：boxWidth，
高度：箱高
})
.样式（“笔划”，功能（d）{
如果（d.type==“发票”）{
返回“#f2ab
   //update the nodes here
  //node code here
      // Update the linksâ¦
   var link = svg.selectAll("path.link")
       .data(links, function (d) {
       return d.target.id;
   });

   // Enter any new links at the parent's previous position.
   link.enter().append("path", "g")
       .attr("class", "link")
       .attr("x", boxWidth )
       .attr("y", boxHeight)
       .attr("d", function (d) {
       var o = {
           x: source.x0,
           y: source.y0
       };
       return diagonal({
           source: o,
           target: o
       });
   });

   // Transition links to their new position.
   link.transition()
       .duration(duration)
       .attr("d", diagonal);

   // Transition exiting nodes to the parent's new position.
   link.exit().transition()
       .duration(duration)
       .attr("d", function (d) {
       var o = {
           x: source.x,
           y: source.y
       };
       return diagonal({
           source: o,
           target: o
       });
   })
       .remove(); 

  var diagonal = d3.svg.diagonal()
    .projection(function (d) {
      if (d.depth == 1){
        return [d.y+boxWidth/2, d.x];//now line will end to the box width for depth 1.
      } else {
        return [d.y+70, d.x];
      }

}); 

  var diagonal = d3.svg.diagonal()
    .projection(function (d) {
      if (d.depth == 1){
        return [d.y-boxWidth/2, d.x];//now line will end to the box width for depth 1.
      } else {
        return [d.y+70, d.x];
      }

});

   nodes.forEach(function (d) {
       d.y = d.depth *450;
   });