d3.js - D3树: lines instead of diagonal projection

Question

我正在使用 d3.js 使用 this example 创建一棵树.

这可以完美地处理我拥有的数据并产生所需的结果，除了一个细节:我不希望节点之间有那些摇摆连接线，我想要一条干净简单的线。谁能告诉我如何制作它？

我一直在查看 d3.js 的 API 文档，但没有成功。据我了解，给定一组两对坐标 (x,y)，svg.line 函数应该生成一条直线。我认为我需要知道的是:给定这些数据，如何根据 links 数组中每对节点的 (cx,cy) 创建一条线:

var margin = {顶部:40，右侧:40，底部:40，左侧:40}；

var width = 960 - margin.left - margin.right;

var height = 500 - margin.top - margin.bottom;

var 树 = d3.layout.tree()
    .size([高度,宽度]);

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

var svg = d3.select("body").append("svg")
    .attr("宽度", 宽度 + 边距.左 + 边距.右)
    .attr("高度", 高度 + 边距.顶部 + 边距.底部)
    .append(“g”)
    .attr("变换", "翻译("+ margin.left + ","+ margin.top + ")");

d3.csv("graph.csv", 函数(链接) {
    var 节点名称 = {};

links.forEach(函数(链接) {
varparent = link.source = nodeByName(link.source),
    子 = link.target = nodeByName(link.target);
    if (parent.children)parent.children.push(child);
    否则parent.children = [child];
});

var 节点 = tree.nodes(links[0].source);

svg.selectAll(".link")
    .数据(链接)
.enter().append("路径")
    .attr("类", "链接")
    .attr("d", 对角线);

svg.selectAll(".node")
    .data(节点)
.enter().append("圆")
    .attr("类", "节点")
    .attr("r", 10)
    .attr("cx", function(d) { return d.y; })
    .attr("cy", function(d) { return d.x; });

函数nodeByName(名称){
    返回nodesByName[名称] || (nodesByName[名称] = {名称: 名称});
}
});

Answer 1

其实我是从其他例子中得出的:





svg.selectAll(".link")
    .data(links)
.enter().append("line")
    .attr("class", "link")
    .attr("x1", function(d) { return d.source.y; })
    .attr("y1", function(d) { return d.source.x; })
    .attr("x2", function(d) { return d.target.y; })
    .attr("y2", function(d) { return d.target.x; });