d3.tree => transform non sembra funzionare

Question

Creo un grafico del layout dell'albero utilizzando d3js. I nodi sono selezionabili per alternare la visualizzazione dei bambini. Il nodo figlio deve essere inserito in una posizione predefinita e quindi trasferito nella posizione desiderata. Il problema è che le coordinate di inserimento sono sempre disattivate. Quando esegui il debugging con Firebug, esso mostra che x = 51.42857142857142 e y = 200.0, anche se la riga
deve essere modificata (io uso i valori fissi qui per risolvere il problema ulteriormente

Dove si trova il mio errore

codice completo:?

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

function toggleAll(d) { 
    if (d.children) { 
     d.children.forEach(toggleAll); 
     toggle(d); 
    } 
} 

function update(source) { 
    // Node movement delay 
    var duration = d3.event && 1500; 

    // Compute the new tree layout. 
    var nodes = tree.nodes(root).reverse(); 

    // Normalize for fixed-depth. 
    nodes.forEach(function(d) { d.y = d.depth * 100; }); 

    // Update the nodes… 
    var node = vis.selectAll("g.node") 
    .data(nodes, function(d) { return d.id || (d.id = ++i); }); 

    // Enter any new nodes at the parent's previous position. 
    var nodeEnter = node.enter().append("svg:g") 
    .attr("class", "node") 
    .attr("transform", "translate(90,100)") 
    .on("click", function(d) { toggle(d); update(d); }); 

    nodeEnter.append("svg:circle") 
    .attr("r", 1e-6); 


    // Transition nodes to their new position. 
    var nodeUpdate = node.transition() 
    .duration(duration) 
    .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; }) 

    nodeUpdate.select("circle") 
    .attr("r", 4.5) 
    .style("fill", function(d) { return d._children ? "red" : "#fff"; }); 



    // Transition exiting nodes to the parent's new position. 
    var nodeExit = node.exit().transition() 
    .duration(duration) 
    .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; }) 
    .remove(); 

// While moving the nodes, they need to shrink 
nodeExit.select("circle") 
    .attr("r", 1e-6); 


    // Stash the old positions for transition. 
    nodes.forEach(function(d) { 
    d.x0 = d.x; 
    d.y0 = d.y; 
    }); 
} 


var i = 0, root; 
var radius = 960/2; 
var tree = d3.layout.tree() 
    .size([360, radius - 120]); 
var diagonal = d3.svg.diagonal.radial() 
    .projection(function(d) { return [d.y, d.x/180 * Math.PI]; }); 

var vis = d3.select("#body").append("svg:svg") 
    .attr("width", radius * 2) 
    .attr("height", radius * 2 - 50) 
    .append("g") 
    .attr("transform", "translate(" + radius + "," + radius + ")"); 

d3.json("flare.json", function(json) { 
    root = json; 
    root.x0 = 0; 
    root.y0 = 0; 


    // Initialize the display to show a few nodes. 
    root.children.forEach(toggleAll); 
    toggle(root.children[1]); 

    update(root); 
}); 

Answer 1

si cambia l'inserimento coordinate regolando lo 0 iniziale, cioè cambiando

.attr("transform", "translate(90,100)") 

Ad esempio, se si desidera inserire i nuovi nodi alla posizione del loro nodo padre, è possibile farlo passando un riferimento all'elemento genitore alla funzione update e ottenere la sua transform valore:

var sourceNode = d3.select(parentElement); 

// Enter any new nodes at the parent's previous position. 
var nodeEnter = node.enter().append("svg:g") 
    .attr("class", "node") 
    .attr("transform", parentElement ? sourceNode.attr("transform") : "translate(90,100)") 
    .on("click", function (d) { 
    toggle(d); 
    update(d, this); 
}); 

jsfiddle completo here.