D3 дерево: линии вместо диагональной проекции

Question

Я использую d3.js для создания дерева с использованием this example.

Это обрабатывает данные, которые у меня есть, и дает желаемый результат, за исключением одной детали: я не хочу, чтобы эти wiggly соединительные линии между узлами, я хочу чистую и простую линию. Может ли кто-нибудь показать мне, как это сделать?

Я смотрел документацию по API для d3.js, но без успеха. Из того, что я понял, функция svg.line должна создать прямую линию, заданную набором из двух пар координат (x, y). То, что я думаю, что нужно знать: учитывая эти данные, как создать линию учитывая (сх, су) каждой пары узлов в ссылок массив:

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

На самом деле я выяснял из другого примера:

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