D3 Siła-graf skierowany używając teksty zamiast węzły

Question

oryginalny: http://mbostock.github.com/d3/ex/force.html

W swoim przykładzie, jak przewidziano w powyższym linku, jestem po prostu próbuje zastąpić węzły okrąg z ich nazwami zamiast. Nie wiem zbyt wiele o D3 ani js/jquery, ale staram się dowiedzieć, jak to działa.

Udało mi się zastąpić węzły za pomocą svg: text, ale kiedy to zrobię, po prostu "odradzają się", niezależnie od tego, gdzie zaczynają i nie animują.

Nie wiem, czy powinienem używać tutaj grup. Jeśli to zrobię, naucz mnie.

Jak dotąd, jest to mój zmodyfikowany kod:

<div id="chart"> 
</div> 

<script type="text/javascript"> 
<!-- 

var w = 960, 
    h = 500, 
    fill = d3.scale.category20(); 

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

d3.json("http://fourthdraft.com/ext/dataviz/miserables.json", function(json) { 
    var force = d3.layout.force() 
     .charge(-120) 
     .linkDistance(70) 
     .nodes(json.nodes) 
     .links(json.links) 
     .size([w, h]) 
     .start(); 

    var link = vis.selectAll("line.link") 
     .data(json.links) 
    .enter().append("svg:line") 
     .attr("class", "link") 
     .style("stroke-width", function(d) { return Math.sqrt(d.value); }) 
     .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; }); 

    var node = vis.selectAll("circle.node") 
     .data(json.nodes) 
    .enter().append("svg:text") 
     .attr("class", "node") 
     .attr("x", function(d) { return d.x; }) 
     .attr("y", function(d) { return d.y; }) 
     .text(function(d) { return d.name; }) 
     .style("fill", function(d) { return fill(d.group); }) 
     .call(force.drag); 

    node.append("svg:title") 
     .text(function(d) { return d.name; }); 

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

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

//--> 
</script> 

Answer 1

Zobacz ten skrzypce: http://jsfiddle.net/nrabinowitz/QMKm3/6/

Głównym problemem z kodem powyżej jest to, że właściwie zmieniło cx i cy atrybuty (które są specyficzne do elementu svg:circle) do x i y w części, w której zostały dołączone elementy svg:text, ale nie zostały one zmienione w module obsługi tick, w którym nastąpiła iteracyjna aktualizacja układu. ns:

force.on("tick", function() { 
    // snip 

    node.attr("x", function(d) { return d.x; }) 
     .attr("y", function(d) { return d.y; }); 
}); 

też powinien zmienić wybór-i-dołączanie od

var node = vis.selectAll("circle.node") 
    .data(json.nodes) 
.enter().append("svg:text") 

do

var node = vis.selectAll("text.node") 
    .data(json.nodes) 
.enter().append("svg:text") 

Chociaż nie sądzę, to czyni żadnej różnicy w kontekście ten kod, w końcu cię wyzwoli - w D3, as explained here, zazwyczaj używasz wzorca "wybierz za pomocą selektora, dodaj brakujące węzły pasujące do tego selektora, usuń dodatkowe węzły pasujące do tego selektora". W kodzie selektor i dodane węzły nie pasują do siebie, co jest problemem koncepcyjnym, nawet jeśli nie ma żadnych konsekwencji dla kodu, jak zapisano. (Powinienem zauważyć, że ten wzór jest trochę mylący i dziwny, ale co najmniej, po nim kod stanie się bardziej czytelny dla innych programistów.)