D3對角線使用座標而不是對象

Question

我正在尋找一種方法來創建一條線，就像使用d3.svg.diagonal獲得的線一樣，但不是使用源和目標對象，而是使用座標。我試圖擺弄投影功能，但沒有成功。

這裏是一個小提琴，我發現它正在對象之間進行：http://jsfiddle.net/bmdhacks/qsEbd/5/

短版我的目標的：

可以說我有兩點，像這樣的畫面：

我希望能夠讓他們通過只提供開始和結束的座標進行以下操作：

---

最新的小提琴，如果它可以幫助：

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

     var a = {x:c.y, y:c.x}; 
     var b = {x:d.y, y:d.x}; 
     links.push({source: b, target: a}); 
    }) 
}) 

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) { 
      console.log(d); 
      return [d.y, d.x]; }); 

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

Answer 1

好了，我從解碼插畫SVG文件，並計算出的值來實現這一目標。這裏供其他人蔘考。這個例子只能水平工作，但我相信你可以找出垂直版本...... :)

d=[{x1:100,y1:100,x2:300,y2:500}, ... ] 

var CustomLine = function(d,i){ 
     var x1 = d.x1; 
     var y1 = d.y1; 
     var x2 = d.x2; 
     var y2 = d.y2; 
     var s = Math.abs(x1-x2)*0.70; // strength 
     return "M"+x1+","+y1+" C"+(x1+s)+","+y1+" "+(x2-s)+","+y2+" "+x2+","+y2; 
    }