D3ツリー：斜め投影の代わりに線

Question

私はd3.jsを使ってthis exampleを使ってツリーを作成しています。

これは、私は完全に持っているデータを処理し、1つの詳細を除いて望ましい結果を生成します。私は、ノード間のこれらの波状コネクタラインが、私はクリーンでシンプルなラインを望んで望んでいません。誰も私にそれを作り出す方法を教えてもらえますか？

私はd3.jsのAPIドキュメントを見てきましたが、成功しませんでした。私が理解したところでは、svg.line関数は2組の座標（x、y）のセットを与えられた直線を生成するはずです。私は私が知っておく必要があると思うことはある。このデータ与え、リンク配列内のノードの各ペアの（CX、CY）を与えられたラインを作成する方法：実際に

var margin = {top: 40, right: 40, bottom: 40, left: 40}; 

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

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

var tree = d3.layout.tree() 
    .size([height, width]); 

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

var svg = d3.select("body").append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

d3.csv("graph.csv", function(links) { 
    var nodesByName = {}; 

links.forEach(function(link) { 
var parent = link.source = nodeByName(link.source), 
    child = link.target = nodeByName(link.target); 
    if (parent.children) parent.children.push(child); 
    else parent.children = [child]; 
}); 

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

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

svg.selectAll(".node") 
    .data(nodes) 
.enter().append("circle") 
    .attr("class", "node") 
    .attr("r", 10) 
    .attr("cx", function(d) { return d.y; }) 
    .attr("cy", function(d) { return d.x; }); 

function nodeByName(name) { 
    return nodesByName[name] || (nodesByName[name] = {name: name}); 
} 
}); 

Answer 1

I他の例から考え出し：

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