text not showing in forcelayout d3js but present in view

问题

text is visible in source when viewed from web inspector but is not visible on real graph

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

here i am following this example: http://bl.ocks.org/mbostock/2706022

and also followed this post: D3.js, force-graph, cannot display text/label of nodes

Here is the jsfiddle for this code: http://jsfiddle.net/devprashant/7kWwL/

回答1:

The problem you're having is that your current code is appending <text> to a <circle>, which won't show up. Instead, you need to create a group <g> for each node that contains both the <circle> and the <text>. Try this:

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

Updated JSFiddle here.

来源：https://stackoverflow.com/questions/24388982/text-not-showing-in-forcelayout-d3js-but-present-in-view

标签

javascript

d3.js

label

force-layout