Zaczynam od d3.js i próbuję utworzyć wykres sieciowy, z którego każdy okrąg zawiera etykietę.

Chcę, aby linia przerwała tekst svg.

Próbuję rozbić tekst na wiele elementów<tspan>s, każdy z x = „0” i zmienną „y”, aby symulować rzeczywiste linie tekstu. Kod, który napisałem, daje pewien nieoczekiwany rezultat.

var text = svg.selectAll("text").data(force.nodes()).enter().append("text");

text       
 .text(function (d) {
 arr = d.name.split(" ");
 var arr = d.name.split(" ");
 if (arr != undefined) {
  for (i = 0; i < arr.length; i++) {
   text.append("tspan")
    .text(arr[i])
    .attr("class", "tspan" + i);
  }
 }
});

W tym kodzie dzielę ciąg tekstowy na białe znaki i dołączam każdy podzielony ciąg do tspan. Ale tekst należący do innego okręgu jest również wyświetlany w każdym okręgu. Jak pokonać ten problem?

Oto JSFIDDLEhttp://jsfiddle.net/xhNXS/ tylko z tekstem svg

Oto JSFIDDLEhttp://jsfiddle.net/2NJ25/16/ pokazujący mój problem z tspan.