Czy możliwe jest oznaczanie krawędzi D3?

Question

Czy możliwe jest posiadanie etykiet krawędzi na wykresie przy użyciu d3? Przyjrzałem się przykładom i niektórym dokumentom i widzę, gdzie możliwe jest etykietowanie węzłów, ale etykietowanie krawędzi nie jest nigdzie wyraźnie wymienione (co mogę znaleźć).

Answer 1

Po innych ludzi przykładów I

• dodaj path wzdłuż każdej krawędzi,
• dodać text do krawędzi
• BIND tekst do textpath który odwołuje ścieżkę wzdłuż krawędzi

Ten przykład wykorzystuje e powyżej pomysłów: http://bl.ocks.org/jhb/5955887

Answer 2

Krótka odpowiedź brzmi "tak", ale nie ma wyraźnego poparcia dla niej. Musisz samodzielnie określić pozycję etykiety. Jednym ze sposobów takiego działania byłoby dołączenie etykiety do węzła początkowego i przetłumaczenie jej o połowę odległości do węzła docelowego oraz przesunięcie, aby zapobiec nakładaniu się linii. Dla bardziej skomplikowanych krawędzi (na przykład krzywych) byłoby to trudniejsze.

Answer 3

Próbowałem tekstu na opcji ścieżki, ale jest on dość zaangażowany i nie spowodował wyglądu, jaki chciałem. Niestety, nie sprawdziłem tego w lokalnym repozytorium git. To pochodzi z mojej historii Eclipse (dzięki deweloperom Eclipse). Będziesz musiał zmienić ten fragment kodu na swoją własną strukturę danych, ale mam nadzieję, że to pomoże. W szczególności zwróć uwagę na dodanie wartości id do selekcji lines, a następnie ponowne jej użycie w selekcji procentów za pomocą atrybutu xlink:href. Ponadto dodałem tspan w textpath, aby przesunąć tekst o kilka pikseli, aby pojawił się nad ścieżką zamiast na nim.

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