डी 3: d3.svg.diagonal() d3.svg.line()

Question

के साथ सबस्टिट्यूटिंग, मैंने निम्नलिखित ग्राफ को d3.svg.diagonal() के साथ प्रदान किए गए किनारों के साथ कार्यान्वित किया है। हालांकि, जब मैं d3.svg.line() के साथ विकर्ण को प्रतिस्थापित करने का प्रयास करता हूं, तो यह लक्ष्य और स्रोत डेटा खींचने के लिए प्रतीत नहीं होता है। मैं क्या खो रहा हूँ? क्या मुझे कुछ ऐसा नहीं है जो मुझे d3.svg.line के बारे में नहीं समझा?

निम्नलिखित कोड मैं की बात कर रहा हूँ, पूरा कोड के बाद है:

var line = d3.svg.line() 
    .x(function(d) { return d.lx; }) 
    .y(function(d) { return d.ly; }); 

...

var link= svg.selectAll("path") 
    .data(links) 
    .enter().append("path") 
    .attr("d",d3.svg.diagonal()) 
    .attr("class", ".link") 
    .attr("stroke", "black") 
    .attr("stroke-width", "2px") 
    .attr("shape-rendering", "auto") 
    .attr("fill", "none"); 

पूरे कोड:

var margin = {top: 20, right: 20, bottom: 20, left: 20}, 
    width =1500, 
    height = 1500, 
    diameter = Math.min(width, height), 
    radius = diameter/2; 


var balloon = d3.layout.balloon() 
    .size([width, height]) 
    .value(function(d) { return d.size; }) 
    .gap(50)     

var line = d3.svg.line() 
    .x(function(d) { return d.lx; }) 
    .y(function(d) { return d.ly; }); 


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 + radius) + "," + (margin.top + radius) + ")") 

    root = "flare.json"; 
    root.y0 = height/2; 
    root.x0 = width/2; 

d3.json("flare.json", function(root) { 
    var nodes = balloon.nodes(root), 
     links = balloon.links(nodes); 


var link= svg.selectAll("path") 
    .data(links) 
    .enter().append("path") 
    .attr("d",d3.svg.diagonal()) 
    .attr("class", ".link") 
    .attr("stroke", "black") 
    .attr("stroke-width", "2px") 
    .attr("shape-rendering", "auto") 
    .attr("fill", "none"); 

    var node = svg.selectAll("g.node") 
    .data(nodes) 
    .enter() 
    .append("g") 
    .attr("class", "node"); 

    node.append("circle") 
     .attr("r", function(d) { return d.r; }) 
     .attr("cx", function(d) { return d.x; }) 
     .attr("cy", function(d) { return d.y; }); 

    node.append("text") 
     .attr("dx", function(d) { return d.x }) 
     .attr("dy", function(d) { return d.y }) 
     .attr("font-size", "5px") 
     .attr("fill", "white") 
     .style("text-anchor", function(d) { return d.children ? "middle" : "middle"; }) 
     .text(function(d) { return d.name; }) 
}); 

"लाइन" का उपयोग करते समय svg की डी विशेषता गायब हो जाती है इसकी तुलना।

Answer 1

बस लाइन के लिए लिंक की d विशेषता निर्धारित:

.attr("d", line) 

Answer 2

मैं एक ही समस्या थी ... एक jsFiddle here नहीं है।

ध्यान दें कि line से diagonal बदलकर यह काम करेगा।

Answer 3

शायद विकर्ण समारोह encapsulating और उसके मापदंडों का संपादन आप के लिए काम कर सकता था:

var diagonal = d3.svg.diagonal(); 
var new_diagonal = function (obj, a, b) { 
    //Here you may change the reference a bit. 
    var nobj = { 
     source : { 
      x: obj.source.x, 
      y: obj.source.y 
     }, 
     target : { 
      x: obj.target.x, 
      y: obj.target.y 
     } 
    } 
    return diagonal.apply(this, [nobj, a, b]); 
} 
var link= svg.selectAll("path") 
    .data(links) 
    .enter().append("path") 
    .attr("d",new_diagonal) 
    .attr("class", ".link") 
    .attr("stroke", "black") 
    .attr("stroke-width", "2px") 
    .attr("shape-rendering", "auto") 
    .attr("fill", "none"); 

Answer 4

प्रश्न काफी दिनांकित है, लेकिन जब से मैं एक जवाब नहीं दिख रहा है और कोई एक ही समस्या का सामना कर सकते हैं, यहाँ यह है ।

कारण है कि लाइन साथ विकर्ण के सरल प्रतिस्थापन काम नहीं कर रहा है, क्योंकि d3.svg.line और d3.svg.diagonal वापसी अलग परिणाम:

• d3। svg.diagonal फ़ंक्शन देता है जो डेटाम और इसकी अनुक्रमणिका स्वीकार करता है और इसे प्रक्षेपण का उपयोग करके पथ में बदल देता है। दूसरे शब्दों में diagonal.projection यह निर्धारित करता है कि फ़ंक्शन को निर्देशित डेटाम से निर्देशांक कैसे मिलेगा।
• d3.svg.line फ़ंक्शन देता है जो रेखा के बिंदुओं की एक सरणी स्वीकार करता है और इसे पथ में बदल देता है। तरीके line.x और line.y का निर्धारण कैसे बिंदु आपूर्ति की सरणी के एक तत्व से पुनर्प्राप्त के निर्देशांक

D3 SVG-Shapes reference

SVG Paths and D3.js

तो तुम का परिणाम उपयोग नहीं कर सकते d3.svg।लाइन सीधे डी 3 चयन में (कम से कम जब आप एकाधिक रेखाएं खींचना चाहते हैं)। jsFiddle के संस्करण काम कर रहा है

var line = d3.svg.line() 
       .x(function(point) { return point.lx; }) 
       .y(function(point) { return point.ly; }); 

function lineData(d){ 
    // i'm assuming here that supplied datum 
    // is a link between 'source' and 'target' 
    var points = [ 
     {lx: d.source.x, ly: d.source.y}, 
     {lx: d.target.x, ly: d.target.y} 
    ]; 
    return line(points); 
} 

// usage: 
var link= svg.selectAll("path") 
    .data(links) 
    .enter().append("path") 
    .attr("d",lineData) 
    .attr("class", ".link") 
    .attr("stroke", "black") 
    .attr("stroke-width", "2px") 
    .attr("shape-rendering", "auto") 
    .attr("fill", "none"); 

यहाँ mobeets तैनात:

आप इस तरह एक और समारोह में लपेट की जरूरत jsFiddle