为什么我的D3节点会显示他们的文字？

Question

这是我的JSfiddle：

Fiddle

我尝试过将文本附加到节点的典型方法，如下所示：

node.append("text")
        .text(function(d) { return d.name; })
        .attr("text-anchor", "middle")
        .attr("font-size", "1.8em")
        .attr("y", 5);

但出于某种原因，在这种情况下，它不想工作。我从这个stackoverflow问题中获取了这个D3图的大部分代码：

stackoverflow question

即使我们的代码几乎相同，提问者得到的解决方案也不适用于我。有任何想法吗？

Answer 1

由于点击侦听器应同时适用于circle和text，因此您必须对circle和text元素进行分组。使用<g>元素的transform属性来定位节点。

＆＃13;

＆＃13;

var components = [{
    name: "component 1",
    id: "c1",
    children: [{
        name: "hardware 1",
        id: "h1",
        children: [{
            name: "software1",
            id: "s1"
        }],
    }, {
        name: "hardware 2",
        id: "h2",
        children: [{
            name: "software2",
            id: "s2"
        }, {
            name: "software3",
            id: "s3"
        }]
    }]
}];

var w = 600,
    h = 600,
    radius = 10,
    node,
    link,
    root;

var force = d3.layout.force()
    .on("tick", tick)
    .charge(function(d) {
        return -500;
    })
    .linkDistance(function(d) {
        return d.target._children ? 100 : 50;
    })
    .size([w, h - 160]);

var svg = d3.select("body").append("svg")
    .attr("width", w)
    .attr("height", h);

root = components[0]; //set root node
root.fixed = true;
root.x = w / 2;
root.y = h / 2 - 80;
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 = svg.selectAll(".link")
        .data(links);

    // Enter any new links.
    link.enter().insert("svg: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 = svg.selectAll(".node")
        .data(nodes);

    // Enter any new nodes.
    var g = node.enter().append("g")
        .attr("class", "node")
        .on("click", click)
        .call(force.drag);

    g.append("circle")
        .attr("r", radius);


    g.append("text")
        .text(function(d) {
            return d.name;
        })
        .attr("text-anchor", "middle")
        .attr("font-size", "1.8em")
        .attr("y", 5);


    // 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("transform", function(d) {
        return "translate(" + d.x + "," + d.y + ")";
    });
}

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

＆＃13;

circle {
	cursor: pointer;
	stroke: #34495e;
	stroke-width: 2px;
	box-sizing: border-box;
	stroke-location: inside;
}

line.link {
	fill: none;
	stroke: #34495e;
	stroke-width: 1.5px;
}
circle {
	  fill: lightsteelblue;
	  stroke: #555;
	  stroke-width: 3px;
	}
	circle.leaf {
	  stroke: #fff;
	  stroke-width: 1.5px;
	}
	path.hull {
	  fill: lightsteelblue;
	  fill-opacity: 0.3;
	}
	line.link {
	  stroke: #333;
	  stroke-opacity: 0.5;
	  pointer-events: none;
	}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

＆＃13;

＆＃13;

＆＃13;