如何使用D3对角线函数绘制曲线线条？

Question

我看了一份样例 http://bl.ocks.org/mbostock/raw/4063570/：

它可以从左到右将源目标生成漂亮的合并行。

在我的情况下，我需要手动布局节点并放置x、y坐标。在这种情况下，线条在源节点处没有合并。以下是重现此问题的测试代码：

var data = [ {name: "p1", children: [{name: "c1"}, {name: "c2"}, {name: "c3"}, {name: "c4"}]}];
var width = 400, height = 200, radius = 10, gap = 50;

// test layout
var nodes = [];
var links = [];
data.forEach(function(d, i) {
    d.x = width/4;
    d.y = height/2;
    nodes.push(d);
    d.children.forEach(function(c, i) {
        c.x = 3*width/4;
        c.y = gap * (i +1) -2*radius;
        nodes.push(c);
        links.push({source: d, target: c});
    })
})

var color = d3.scale.category20();

var svg = d3.select("#chart").append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g");
var diagonal = d3.svg.diagonal()
        .projection(function(d) { return [d.x, d.y]; });

var link = svg.selectAll(".link")
        .data(links)
        .enter().append("path")
        .attr("class", "link")
        .attr("d", diagonal);

var circle = svg.selectAll(".circle")
        .data(nodes)
        .enter()
        .append("g")
        .attr("class", "circle");

var el = circle.append("circle")
        .attr("cx", function(d) {return d.x})
        .attr("cy", function(d) {return d.y})
        .attr("r", radius)
        .style("fill", function(d) {return color(d.name)})
        .append("title").text(function(d) {return d.name});

这里有一个相关示例，位于http://jsfiddle.net/zmagdum/qsEbd/：

然而，看起来曲线靠近节点的行为与期望相反。我希望它们在节点处水平直线开始，并在中间形成曲线。有什么技巧可以做到这一点吗？

- John Smith

Answer 1

这个解决方案基于优秀的@bmdhacks解决方案，然而，我认为我的更好一些，因为它不需要在数据本身内交换x和y。

思路是你可以使用diagonal.source()和diagonal.target()来交换x和y：

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

现在所有的 x y 交换都被封装在上面的代码中。

结果是:

这里还有一个jsfiddle链接。

- VividD

---

感谢您提供这个示例，显示了source和projection的预期返回值不同。 - David J.

如果两个节点之间有多个链接，该如何展示而不重叠呢？ - Jerry

Answer 2

请注意，在“blocks”示例中，链接中的x和y值已被交换。这通常会导致链接出现在错误的位置，但是作者也提供了一个投影函数来将它们交换回来。

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

这是应用此技术的jsfiddle链接： http://jsfiddle.net/bmdhacks/qsEbd/5/

- bmdhacks

---

如果我想在两个子节点之间建立链接，该怎么办？比如将第一个子节点与根节点后的第二个子节点链接起来。 - Sohail Ahmad