घुमावदार रेखाओं को आकर्षित करने के लिए डी 3 विकर्ण कार्य का उपयोग कैसे करें?

Question

मैं नमूना http://bl.ocks.org/mbostock/raw/4063570/ को देखा:

यह स्रोत लक्ष्य से अच्छा मर्ज किए गए लाइनों बाएं से दाएं पैदा करता है।

मेरे मामले में मुझे मैन्युअल रूप से लेआउट नोड्स की आवश्यकता है और एक्स, वाई निर्देशांक डालना होगा। इस मामले में लाइनों को स्रोत नोड्स पर विलय नहीं किया जाता है।

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); 
     links.push({source: d, target: 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]; }); 

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

http://jsfiddle.net/zmagdum/qsEbd/ पर इस बात का नमूना नहीं है:

हालांकि, यह नोड्स के करीब घटता के व्यवहार की तरह लग रहा वांछित के विपरीत है यहाँ परीक्षण कोड है कि इस समस्या को पुन: पेश है । मैं उन्हें नोड्स पर सीधे क्षैतिज शुरू करना चाहता हूं और बीच में वक्र बनाना चाहता हूं। क्या ऐसा करने के लिए कोई चाल है?

Answer 1

ध्यान दें कि ब्लॉक में उदाहरण के लिए, एक्स और वाई मान लिंक में बदल दिए गए हैं। यह आम तौर पर गलत जगह पर लिंक खींचता है, लेकिन उन्होंने एक प्रोजेक्शन फ़ंक्शन भी प्रदान किया है जो उन्हें वापस भेज देता है।

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

यहाँ इस तकनीक लागू किया के साथ अपने jsfiddle है: http://jsfiddle.net/bmdhacks/qsEbd/5/

Answer 2

यह समाधान उत्कृष्ट @bmdhacks समाधान पर आधारित है, फिर भी, मुझे विश्वास है, मेरा थोड़ा बेहतर है, क्योंकि यह x और y अदला-बदली की आवश्यकता नहीं है डेटा के भीतर ही।

विचार है कि आप diagonal.source() और diagonal.target() उपयोग कर सकते हैं x और y स्वैप करने के लिए है:

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

सभी x y अदला-बदली अब ऊपर कोड के भीतर समझाया गया है।

परिणाम:

यहाँ भी jsfiddle है।