एसवीजी मार्कर एक डी 3.svg.diagonal वक्र पर उचित रूप से उन्मुख नहीं हैं जो डी 3 फोर्स लेआउट लिंक

Question

के रूप में उपयोग किया जाता है, मैं एसवीजी और d3.js. के लिए थोड़ा नया हूं।

डी 3 फोर्स लेआउट के साथ ग्राफ ड्राइंग करते समय, मैं एक साधारण विकर्ण रेखा जनरेटर का उपयोग कर रहा हूं और तीर सिर खींचने के लिए मार्कर-एंड का उपयोग कर रहा हूं।

विकर्ण जनरेटर के बजाय आर्क का उपयोग करते समय तीर के सिर ठीक दिखाई देते हैं। लेकिन कोड में की तरह विकर्ण जनरेटर का उपयोग नीचे उचित मार्कर का उत्पादन नहीं करता है:

var vis = this.vis = d3.select(el).append("svg:svg") 
    .attr("width", w) 
    .attr("height", h); 

var force = d3.layout.force() 
    .gravity(0.03) 
    .distance(120) 
    .charge(-800) 
    .size([w, h]); 

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

vis.append("svg:defs") 
     .selectAll("marker") 
    .data(["normal", "special", "resolved"]) 
    .enter() 
     .append("svg:marker") 
    .attr("id", String) 
    .attr("viewBox", "0 -5 10 10") 
    .attr("refX", 15) 
    .attr("refY", -1.5) 
    .attr("markerWidth", 6) 
    .attr("markerHeight", 6) 
    .attr("orient", "auto") 
    .append("svg:path") 
    .attr("d", "M 0,-5 L 10,0 L0,5"); 

... और फिर भी:

force.on("tick", function() { 
     link.attr("x1", function(d) { return d.source.x; }) 
      .attr("y1", function(d) { return d.source.y; }) 
      .attr("x2", function(d) { return d.target.x; }) 
      .attr("y2", function(d) { return d.target.y; }) 
     .attr("d", linkDiag) 
     .attr("marker-end", function(d) { return "url(#special)"; }); 

    }); 

मार्करों सभी कोने के साथ कम से न हों।

किसी भी मदद की सराहना की जाएगी!

Answer 1

क्या आप थोड़ा और सवाल पूछ सकते हैं? हालांकि यहां तक ​​कि आप कोड चलाने के साथ मुझे लगता है कि आप इस समस्या को स्थिति

Answer 2

यह केवल लगता है कि तीर सही दिशा में इशारा करते हुए नहीं हैं क्योंकि आप तीर जा रहे हैं निर्दिष्ट करने के लिए हो सकता है

.attr("orient", "auto") 

कोशिश refX और refY के माध्यम से एक नई स्थिति के लिए।

उदाहरण के लिए, this code देखें जो विभिन्न दिशाओं में विकर्ण खींचता है। तीरहेड 180 डिग्री पर एक के अपवाद के साथ सही ढंग से दिखाई देते हैं, लेकिन शायद यह एक गोल त्रुटि के कारण है।

अब, refX को लाइन 10 पर, कहने के मूल्य पर बदलने का प्रयास करें, 5. अब, क्षैतिज के करीब तीरहेड गलत दिखाई देते हैं। इसे और नाटकीय रूप से देखने के लिए, मान को 0 को बदलने का प्रयास करें।

क्या हो रहा है कि आप विकर्ण का हिस्सा छुपा रहे हैं, इसलिए रेखा एक पुराने बिंदु पर समाप्त हो रही है, जो वास्तविक अंत से थोड़ा अलग घुमावदार है- बिंदु। वही बात तब होगी जब तीरहेड बहुत बड़ा हो ताकि वह वक्र का हिस्सा ओवरले हो। ध्यान दें कि डी 3 में विकर्णों के लिए, जो सममित बेजियर वक्र हैं, तीरहेड हमेशा क्षैतिज या लंबवत बिंदु को इंगित करना चाहिए। आप देख सकते हैं कि तीरहेड की अस्पष्टता को कम करके क्या हो रहा है।