文本未显示在 forcelayout d3js 中但显示在视图中答案

【问题标题】：text not showing in forcelayout d3js but present in view文本未显示在 forcelayout d3js 中但显示在视图中
【发布时间】：2014-08-14 20:30:16
【问题描述】：

从网络检查器查看时，文本在源代码中可见，但在实际图形中不可见

<html>
<head>
<title>D3</title>
<script src="d3.min.js"> </script>
</head>
<body>

 <script type="text/javascript">

        //Width and height
        var w = 500;
        var h = 300;

        //Original data
        var dataset = {
            nodes: [
                { name: "Adam" },
                { name: "Bob" },
                { name: "Carrie" },
                { name: "Donovan" },
                { name: "Edward" },
                { name: "Felicity" },
                { name: "George" },
                { name: "Hannah" },
                { name: "Iris" },
                { name: "Jerry" }
            ],
            edges: [
                { source: 0, target: 1 },
                { source: 0, target: 2 },
                { source: 0, target: 3 },
                { source: 0, target: 4 },
                { source: 1, target: 5 },
                { source: 2, target: 5 },
                { source: 2, target: 5 },
                { source: 3, target: 4 },
                { source: 5, target: 8 },
                { source: 5, target: 9 },
                { source: 6, target: 7 },
                { source: 7, target: 8 },
                { source: 8, target: 9 }
            ]
        };

        //Initialize a default force layout, using the nodes and edges in dataset
        var force = d3.layout.force()
                             .nodes(dataset.nodes)
                             .links(dataset.edges)
                             .size([w, h])
                             .linkDistance([50])
                             .charge([-100])
                             .start();

        var colors = d3.scale.category10();

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

        //Create edges as lines
        var edges = svg.selectAll("line")
            .data(dataset.edges)
            .enter()
            .append("line")
            .style("stroke", "#ccc")
            .style("stroke-width", 1);

        //Create nodes as circles
        var nodes = svg.selectAll("circle")
            .data(dataset.nodes)
            .enter()
            .append("circle")
            .attr("r", 10)
            .style("fill", function(d, i) {
                return colors(i);
            })
           .call(force.drag);

         //To display text
        nodes.append("text")
            .attr("x", 12)
            .attr("dy", ".35em")
            .text(function(d){  return d.name;

              });
        //Every time the simulation "ticks", this will be called
        force.on("tick", function() {

            edges.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; });

           // nodes.attr("cx", function(d) { return d.x; })
            //     .attr("cy", function(d) { return d.y; });
             nodes.attr("transform", function(d){ 
                 return "translate(" + d.x + "," + d.y + ")"; 
            });

        });


</script>
</body>
</html>

我在下面这个例子： http://bl.ocks.org/mbostock/2706022

并且还关注了这篇文章： D3.js, force-graph, cannot display text/label of nodes

这里是这段代码的 jsfiddle： http://jsfiddle.net/devprashant/7kWwL/

【问题讨论】：

标签： javascript d3.js label force-layout

【解决方案1】：

您遇到的问题是您当前的代码将<text> 附加到<circle>，这不会显示。相反，您需要为包含<circle> 和 <text> 的每个节点创建一个组<g>。试试这个：

var nodes = svg.selectAll("g")
    .data(dataset.nodes).enter()
    .append("g");

nodes.append("circle")
    .attr("r", 10)
    .style("fill", function (d, i) { return colors(i); })
    .call(force.drag);

nodes.append("text")
    .attr("x", 12)
    .attr("dy", ".35em")
    .text(function (d) { return d.name; });

更新了 JSFiddle here.

【讨论】：

为什么分组在这里很重要：1. text 是一个有效的 svg 标签 2. 和在两个代码中都在同一个组中，尽管在第一个 jsfiddle 是的兄弟circle> 和第二个 jsfiddle 和都是 . 的兄弟姐妹
@devprashant：虽然在第二个 JSFiddle 中，<circle> 和 <text> 都是 <g> 的兄弟姐妹作为孩子。组是必需的，因为它们可以有子元素（例如<text>），这与<circle> 或<rect> 不同。请参阅完整的 SVG 规范 here。