如何修复d3树的链接转换

Question

链接之间的过渡在我的d3树形图中不适合我它是一个带有矩形节点的垂直树所以我编辑了attr来塑造链接以适合我的图

原始代码:

var link = svg.selectAll('path.link')
.data(links, function(d) { return d.id; });
// Enter any new links at the parent's previous position.
var linkEnter = link.enter().insert('path', "g")
.attr("class", "link")
.attr('d', function(d){
var o = {x: source.x0, y: source.y0}
return diagonal(o, o)
});
// UPDATE
var linkUpdate = linkEnter.merge(link);
// Transition back to the parent element position
linkUpdate.transition()
.duration(duration)
.attr('d', function(d){ return diagonal(d, d.parent) });
// Remove any exiting links
var linkExit = link.exit().transition()
.duration(duration)
.attr('d', function(d) {
var o = {x: source.x, y: source.y}
return diagonal(o, o)
})
.remove();
function diagonal(s, d) {
path = `M ${s.y} ${s.x}
C ${(s.y + d.y) / 2} ${s.x},
${(s.y + d.y) / 2} ${d.x},
${d.y} ${d.x}`
return path
}

更新代码，使用直接添加为attr的操纵对角线:

// Update the links...
var link = svg.selectAll('path.link')
.data(links, function(d) { return d.id; });
// Enter any new links at the parent's previous position.
var linkEnter = link.enter().insert('path', "g")
.attr("class", "link")
.attr("d", function(d) {
return "M" + (d.x  + rectW / 2) +  "," + (d.y + rectH / 2)
+ "C" + (d.x  + rectW / 2) + "," + (d.y + d.parent.y) / 2
+ " " + (d.parent.x + rectW / 2) + "," +  (d.y + d.parent.y) / 2
+ " " + (d.parent.x + rectW / 2) + "," + (d.parent.y + rectH / 2);
});
// UPDATE
var linkUpdate = linkEnter.merge(link);
// Transition back to the parent element position
linkUpdate.transition()
.duration(0)
.attr("d", function(d) {
return "M" + (d.x  + rectW / 2) +  "," + (d.y + rectH / 2)
+ "C" + (d.x  + rectW / 2) + "," + (d.y + d.parent.y) / 2
+ " " + (d.parent.x + rectW / 2) + "," +  (d.y + d.parent.y) / 2
+ " " + (d.parent.x + rectW / 2) + "," + (d.parent.y + rectH / 2);
})
// Remove any exiting links
var linkExit = link.exit().transition()
.duration(duration)
.attr("d", function(d) {
return "M" + (d.x  + rectW / 2) +  "," + (d.y + rectH / 2)
+ "C" + (d.x  + rectW / 2) + "," + (d.y + d.parent.y) / 2
+ " " + (d.parent.x + rectW / 2) + "," +  (d.y + d.parent.y) / 2
+ " " + (d.parent.x + rectW / 2) + "," + (d.parent.y + rectH / 2);
})
.remove();

我注意到在我更新的代码形状链接的attr是相同的linkEnter, linkUpdateTransition和linkExit但对于原始代码linkUpdateTransition是不同的，因为我几乎得到了我的attr工作的踪迹和错误我不知道如何调整linkUpdateTransition attr有一个平稳的过渡

Answer 1

不确定这是否对任何人有帮助，但我最终弄清楚了，它原来是我更新的代码和原始代码的组合，下面我将把工作链接部分

// Update the links...
var link = svg.selectAll('path.link')
.data(links, function(d) { return d.id; });
// Enter any new links at the parent's previous position.
var linkEnter = link.enter().insert('path', "g")
.attr("class", "link")
.attr('d', function(d) {
var o = {x: source.x0, y: source.y0,};
return diagonal(o, o);
});
// UPDATE
var linkUpdate = linkEnter.merge(link);
// Transition back to the parent element position
linkUpdate.transition()
.duration(duration)
.attr('d', function(d) { return diagonal(d, d.parent); });
// Remove any exiting links
var linkExit = link.exit().transition()
.duration(duration)
.attr('d', function(d) {
var o = {x: source.x, y: source.y};
return diagonal(o, o);
})
.remove();
// Creates a curved (diagonal) path from parent to the child nodes
function diagonal(s, d) {
path = 'M ' + (s.x + rectW / 2) + ' ' + (s.y + rectH / 2) +
'C ' + (s.x + rectW / 2 ) + ' ' + (s.y + d.y) / 2 +
', ' + (d.x + rectW / 2) + ' ' + (s.y + d.y) / 2  +
', ' + (d.x + rectW / 2) + ' ' + (d.y + rectH / 2);
return path;
}