d3.js力可摺疊帶標籤

Question

我有一些麻煩，試圖重新創造

我已經嘗試的http://bl.ocks.org/950642的功能添加到http://mbostock.github.com/d3/talk/20111116/force-collapsible.html

，並試圖做的事：

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

但是，這會導致圓圈消失，並且所有文本都會聚集在左上角。

任何想法，我可能做錯了什麼？這裏是我的JS：

這裏是一個的jsfiddle：由於某種原因，它不工作，雖然在這裏，因爲以.json文件我想...

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

不它來自您撥打2次node.enter()的事實？ 在追加圓圈之前調用一次，在追加文本之前調用一次。

嘗試通過更換線路node.enter().append("text")：

node.append("text") 

Answer 2

我似乎已經能夠在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是兩者的結合圖形。