## 如何使用D3对角线函数绘制曲线？内容来源于 Stack Overflow，并遵循CC BY-SA 3.0许可协议进行翻译与使用

• 回答 (2)
• 关注 (0)
• 查看 (59)

```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 = [];
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);
})
})

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]; });

.enter().append("path")
.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})
.style("fill", function(d) {return color(d.name)})
.append("title").text(function(d) {return d.name});```

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