d3.tree =>转换似乎不起作用

问题描述：

我使用d3js创建了一个树形布局图。节点可点击切换显示孩子。应将子节点插入预定位置，然后转换到所需的位置。问题是插入坐标总是关闭。使用Firebug进行调试时，它显示直接在追加新节点后，其坐标x = 51.42857142857142和y = 200.0，即使行
应该改变它们（我在此处使用固定值，以便进一步确定问题的答案。d3.tree =>转换似乎不起作用

哪里是我的错

全码：？

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

'转换'不会改变你将在DOM检查器中看到的坐标 - 你如何确定新节点在哪里？ | JSfiddles非常重要，如果您想增加获得SO的帮助的机会。 – ZachB

继承人一个小提琴http://jsfiddle.net/94EWe/ –

你可以更具体地说明你在做什么？你小提琴是很多数据，没有解释你的实际问题是什么。也许包括一个更小的树并解释所需的行为。 –

答

您更改插入通过调整初始坐标transform，即通过传递一个参考父元素的update功能和获取其transform改变

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

例如，如果你想在自己的父节点的位置插入新的节点，你可以这样做值：

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。

d3.tree =>转换似乎不起作用

相关推荐