d3.tree => ट्रांसफॉर्म काम नहीं करता

Question

मैं d3js का उपयोग करके एक पेड़ लेआउट ग्राफ बना देता हूं। नोड्स बच्चों को टॉगल करने के लिए क्लिक करने योग्य हैं। बच्चे नोड को पूर्वनिर्धारित स्थिति में डाला जाना चाहिए और फिर वांछित स्थान पर स्थानांतरित किया जाना चाहिए। समस्या यह है कि सम्मिलन निर्देशांक हमेशा बंद होते हैं। जब Firebug के साथ डिबगिंग, यह पता चलता है कि सीधे नए नोड जोड़कर बाद अपने निर्देशांक x = 51.42857142857142 और y = 200.0 हैं भले ही लाइन
.attr("transform", "translate(90,100)") उन्हें बदलने चाहिए (मैं यहाँ तय मूल्यों का उपयोग, नीचे समस्या आगे पिन करने के लिए।

मेरी गलती कहां है

पूर्ण कोड:

// 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

आप प्रविष्टि बदलने के प्रारंभिक 0 का समायोजन करके निर्देशांक, यानी बदलते

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

उदाहरण के लिए, अगर आप अपने माता पिता के नोड के स्थान पर नई नोड्स सम्मिलित करना चाहते हैं, तो आप ऐसा कर सकते हैं update कार्य करने के लिए माता पिता के तत्व के लिए संदर्भ से गुजर रहा है और इसके transform हो रही द्वारा मूल्य:

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 here।