javascript 如何使用D3对角线函数绘制曲线？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15007877/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use the D3 diagonal function to draw curved lines?
提问by John Smith
I looked at sample http://bl.ocks.org/mbostock/raw/4063570/:
我查看了示例http://bl.ocks.org/mbostock/raw/4063570/：
It produces nice merged lines from source target from left to right.
它从左到右从源目标产生很好的合并线。
In my case I need to layout nodes manually and put x, y coordinates. In this case the lines are not merged at source nodes. Here is the test code that reproduce this problem:
在我的情况下，我需要手动布局节点并放置 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});
There is sample of this at http://jsfiddle.net/zmagdum/qsEbd/:
http://jsfiddle.net/zmagdum/qsEbd/ 上有这样的示例：
However, it looks like the behavior of curves close to nodes are opposite of desired. I would like them to start straight horizontally at the nodes and make a curve in the middle. Is there a trick to do this?
但是，看起来靠近节点的曲线的行为与预期相反。我希望它们在节点处水平地开始并在中间形成一条曲线。有没有技巧可以做到这一点？
回答by VividD
This solution is based on excellent @bmdhacks solution, however, I believe mine is slightly better, since it doesn't require swapping xand ywithin data itself.
这个解决方案基于优秀的@bmdhacks 解决方案，但是，我相信我的稍微好一点，因为它不需要交换x和y数据本身。
The idea is that you can use diagonal.source()and diagonal.target()to swap xand y:
这个想法是你可以使用diagonal.source()anddiagonal.target()交换xand 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]; });
All x yswapping is now encapsulated within the code above.
所有x y交换现在都封装在上面的代码中。
The result:
结果：
Here is also jsfiddle.
这里也是jsfiddle。
回答by bmdhacks
Note that in the blocks example, the x and y values are swapped in the links. This would normally draw the links in the wrong place, but he's also supplied a projection function that swaps them back.
请注意，在块示例中，x 和 y 值在链接中交换。这通常会在错误的位置绘制链接，但他还提供了一个投影功能，可以将它们交换回来。
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });
Here's your jsfiddle with this technique applied: http://jsfiddle.net/bmdhacks/qsEbd/5/
这是应用此技术的 jsfiddle：http: //jsfiddle.net/bmdhacks/qsEbd/5/
