क्या डी 3 एज लेबलिंग संभव है?

Question

क्या d3 का उपयोग कर ग्राफ में किनारे लेबल होना संभव है? मैंने उदाहरणों और कुछ दस्तावेजों को देखा है, और मैं देख सकता हूं कि नोड लेबलिंग कहां संभव है, लेकिन किनारे लेबलिंग का स्पष्ट रूप से कहीं भी उल्लेख नहीं किया गया है (जो मुझे मिल सकता है)।

Answer 1

के बाद अन्य लोगों के उदाहरण मैं

• हर बढ़त के साथ एक path जोड़ने के लिए,
• किनारों को text जोड़ने
• बाँध कि एक textpath जो किनारे के साथ पथ संदर्भित कर रहा है के लिए पाठ

यह उदाहरण वें का उपयोग कर रहा है ई विचारों के ऊपर: http://bl.ocks.org/jhb/5955887

Answer 2

संक्षिप्त उत्तर "हाँ" है, लेकिन इसके लिए कोई स्पष्ट समर्थन नहीं है। आपको खुद लेबल की स्थिति निर्धारित करनी होगी। ऐसा करने का एक तरीका लेबल को प्रारंभ नोड में संलग्न करना होगा और इसे लक्ष्य नोड तक आधे दूरी तक अनुवाद करना होगा, साथ ही कुछ ऑफसेट को लाइन को ओवरलैप करने से रोकने के लिए। अधिक विस्तृत किनारों (जैसे घटता) के लिए यह और अधिक कठिन होगा।

Answer 3

मैंने पथ विकल्प पर पाठ की कोशिश की, लेकिन यह काफी शामिल है और परिणामस्वरूप मैं जो उपस्थिति चाहता हूं उसका नतीजा नहीं हुआ। दुर्भाग्यवश, मैंने इसे स्थानीय गिट भंडार में नहीं देखा। यह मेरे ग्रहण इतिहास से आता है (धन्यवाद ग्रहण डेवलपर्स)। आपको इस कोड स्निपेट को अपनी डेटा संरचना में बदलना होगा, लेकिन मुझे उम्मीद है कि यह कुछ मदद की है। विशेष रूप से, id मान को lines चयन में जोड़ने और फिर xlink:href विशेषता का उपयोग कर प्रतिशत चयन में इसका उपयोग करने पर ध्यान दें। इसके अलावा, मैंने को textpath में टेक्स्ट को दो पिक्सेल से नीचे ले जाने के लिए जोड़ा है, इसलिए यह इसके बजाए पथ पर दिखाई देता है।

 function drawLines(links) { 
     var diagonal = d3.svg.diagonal(); 
     var format = d3.format(".1%"); 
     var linkKey = function(l) {return l.target.key; }; 
     var lines = linesGroup.selectAll("path").data(links, linkKey); 
     lines.enter() 
      .append("path") 
      .on("mouseover", select) 
      .on("mouseout", unselect) 
      .attr("d", diagonal) 
      .attr("id", function (l) { return "interaction-path-target-" + l.target.key; }) 
      .style("stroke-width", 0.000001); 
     lines.exit() 
      .transition().duration(500) 
      .style("stroke-width", 0.000001) 
      .remove(); 

     lines.transition() 
      .delay(function(d, i) { return i * 100; }) 
      .duration(500) 
      .style("stroke-width", function(d) { return d.weight == 0 ? 0.000001 : d.weight/1000; }) 
      .attr("d", diagonal); 

     var percentages = linesGroup.selectAll("text").data(links, linkKey); 
     percentages.enter() 
      .append("text") 
      .attr("opacity", 1) 
      .append("svg:textPath") 
      .attr("startOffset", "70%") 
      .attr("xlink:href", 
        function(l) { 
         return "#interaction-path-target-" + l.target.key; 
        }) 
      .append("svg:tspan") 
      .attr("dy", 3) 
      .attr("class", "percentageText") 
     percentages.exit() 
      .transition().duration(500) 
      .attr("opacity", 0) 
      .remove(); 
     percentages 
      .transition() 
      .delay(function(d, i) { return i * 100; }) 
      .duration(500) 
      .attr("opacity", 1); 

     percentages.select(".percentageText").text(function(d) { 
       var newvalue = d.weight ? 
        d.incomming ? percentageIn(d.weight) : percentageOut(d.weight) : 0; 
       return format(newvalue); 
      }); 
    }