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

Question

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

dev*_*ant 2 javascript label d3.js force-layout

从Web检查器查看时，文本在源中可见，但在实际图形上不可见

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

Run Code Online (Sandbox Code Playgroud)

在这里，我按照以下示例操作：http : //bl.ocks.org/mbostock/2706022

并且也遵循了这篇文章： D3.js，强制图，无法显示节点的文本/标签

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

Answer 1

mdm*_*dml 6

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

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

Run Code Online (Sandbox Code Playgroud)

在此更新了JSFiddle 。

归档时间：	11 年，2 月前
查看次数：	3976 次
最近记录：	11 年，2 月前