d3.js fuerza colapsable con etiquetas

Question

Estoy teniendo algunos problemas tratando de recrear

He intentado añadir las características de http://bl.ocks.org/950642 a http://mbostock.github.com/d3/talk/20111116/force-collapsible.html

y trató de hacer:

node.enter().append("text") 
     .attr("dx", 12) 
     .attr("dy", ".35em") 
     .text(function(d) { return d.name }); 

Sin embargo, los resultados en los círculos desaparecen y todo el texto se agrupa en la esquina superior izquierda.

¿Alguna idea de lo que podría estar haciendo mal? Aquí está mi JS:

que aquí hay una jsFiddle: por alguna razón no está funcionando, aunque aquí debido al archivo .json creo ...

http://jsfiddle.net/vMw2N/5/

var width = 960, 
    height = 500, 
    node, 
    link, 
    root; 

var force = d3.layout.force() 
    .on("tick", tick) 
    .charge(function(d) { return d._children ? -d.size/100 : -30; }) 
    .linkDistance(function(d) { return d.target._children ? 80 : 30; }) 
    .size([width, height]); 

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

d3.json("../data/flare.json", function(json) { 
    root = json; 
    root.fixed = true; 
    root.x = width/2; 
    root.y = height/2; 
    update(); 
}); 

function update() { 
    var nodes = flatten(root), 
     links = d3.layout.tree().links(nodes); 

    // Restart the force layout. 
    force 
     .nodes(nodes) 
     .links(links) 
     .start(); 

    // Update the links… 
    link = vis.selectAll("line.link") 
     .data(links, function(d) { return d.target.id; }); 

    // Enter any new links. 
    link.enter().insert("line", ".node") 
     .attr("class", "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; }); 

    // Exit any old links. 
    link.exit().remove(); 

    // Update the nodes… 
    node = vis.selectAll("circle.node") 
     .data(nodes, function(d) { return d.id; }) 
     .style("fill", color); 

    node.transition() 
     .attr("r", function(d) { return d.children ? 4.5 : Math.sqrt(d.size)/10; }); 

    // Enter any new nodes. 
    node.enter().append("circle") 
     .attr("class", "node") 
     .attr("cx", function(d) { return d.x; }) 
     .attr("cy", function(d) { return d.y; }) 
     .attr("r", function(d) { return d.children ? 4.5 : Math.sqrt(d.size)/10; }) 
     .style("fill", color) 
     .on("click", click) 
     .call(force.drag); 


    node.enter().append("text") 
      .attr("class","node") 
      .attr("cx", function(d) { return d.x; }) 
      .attr("cy", function(d) { return d.y; }) 
      .on("click",click) 
      .text(function(d){return d.name}) 
      .call(force.drag); 

    // Exit any old nodes. 
    node.exit().remove(); 
} 

function tick() { 
    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; }); 
} 

// Color leaf nodes orange, and packages white or blue. 
function color(d) { 
    return d._children ? "#3182bd" : d.children ? "#c6dbef" : "#fd8d3c"; 
} 

// Toggle children on click. 
function click(d) { 
    if (d.children) { 
    d._children = d.children; 
    d.children = null; 
    } else { 
    d.children = d._children; 
    d._children = null; 
    } 
    update(); 
} 

// Returns a list of all nodes under the root. 
function flatten(root) { 
    var nodes = [], i = 0; 

    function recurse(node) { 
    if (node.children) node.size = node.children.reduce(function(p, v) { return p + recurse(v); }, 0); 
    if (!node.id) node.id = ++i; 
    nodes.push(node); 
    return node.size; 
    } 

    root.size = recurse(root); 
    return nodes; 
} 

Answer 1

NO viene del hecho de que llamas 2 veces al node.enter()? Lo llama una vez antes de anexar el círculo y una vez antes de agregar el texto.

tratar de sustituir la línea node.enter().append("text") por:

node.append("text") 

Answer 2

parece que he sido capaz de solucionar el problema mediante la adición de una llamada transformar en la función tick()

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

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

Answer 3

Here es la combinación de ambos grafico.