无法在 d3 强制布局中的节点上显示文本答案

【问题标题】：unable to show text over the node in d3 force layout无法在 d3 强制布局中的节点上显示文本
【发布时间】：2016-02-09 17:24:01
【问题描述】：

我无法在节点顶部显示文本。文本改为显示在节点下方。

确切地说，节点隐藏了我的测试。

我的代码如下.....

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

<script src="../D3/d3.min.js"></script>

</head>
<body>
    <style>

        body {
            background-color: gray;
        }

</style>

    <script type="text/javascript">

        var width = 1400,
            height = 800;

        color = d3.scale.category10();

        var svg = d3.select("body")
                     .append("svg")
                     .attr("width", width)
                     .attr("height", height)
                     .attr("oncontextmenu", "return false;");


                    svg.append("svg:defs")
                    .selectAll("marker")
                    .data(["end"])
                    .enter().append("svg:marker")
                    .attr("id", String)
                    .attr("viewBox", "0 -5 10 10")
                    .attr("refX", 15)
                    .attr("refY", -1.5)
                    .attr("markerWidth", 6)
                    .attr("markerHeight", 6)
                    .attr("orient", "auto")
                    .append("svg:path")
                    .attr("d", "M0,-5L10,0L0,5");


 var nodes =
            [
     {
         "id": "Component",
         "description": "Component are the Containers",
         "type": "wiring"
     },
     {
         "id": "Form Design And Data Design",
         "description": "In the Form Design and Data Design we can create form and data",
         "type": "wiring"
     },
     {
         "id": "Data and Property ",
         "description": "All the Data has the Property and value Associated with It",
         "type": "wiring"
     },
     {
         "id": "Entity Query",
         "description": "Entity Queries can be used to create Entity Relationship ",
         "type": "wiring"
     },
     {
         "id": "Entity Query and Entity Data",
         "description": "Entity Data Can be used to create ",
         "type": "wiring"
     }
            ]


 var links = [
 ]



          var texts = svg.selectAll(".text")
                       .data(nodes)
                       .enter()
                       .append("text")
                       .attr("x", 50)
                       .attr("y", 40)
                       .attr("fill","white")
                       .attr("font-family","sans-serif")
                       .attr("font-size","15px")
                       .text(function (d) { return d.id;});



          var force = d3.layout.force()
                      .nodes(nodes)
                      .links(links)
                      .size([width, height])
                      .linkDistance(250)
                      .charge(-1000)
                      .gravity(.1)
                      //.charge(-10 / k)
                     // .gravity(100 * k)
                      //.linkStrength(5)
                      .theta(1)
                      .alpha(3)
                      //.on('tick', tick)
                      .start();




          var edges = svg.selectAll("line")
                        .data(links)
                        .enter()
                        .append("line")
                        .style("stroke", "#ccc")
                        .style("stroke-width", 1)
                        .attr("marker-end", "url(#end)");


          var nodes = svg.selectAll(".rect")
                        .data(nodes)
                        .enter()
                        .append("svg:rect")
                        .attr("width", 150)
                        .attr("height", 50)
                        .attr("rx", 10)
                        .attr("ry", 10)
                        .attr("x", 150)
                        .attr("y",160)

                        .style("fill", function(d,i) { return color(i); })
                        .call(force.drag);




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






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

【问题讨论】：

标签： javascript html css d3.js svg

【解决方案1】：

将文本创建移到文件的后面，即在节点创建之后。

SVG 使用画家模型，因此文件后面的对象被绘制在文件前面的对象之上。就像画家用后来的东西重绘早期的东西一样。

【讨论】：

【解决方案2】：

首先将你的 var 节点重命名为 nodesdata

var nodesdata =
            [
     {
         "id": "Component",
         "description": "Component are the Containers",
         "type": "wiring"
     },
     {
         "id": "Form Design And Data Design",
         "description": "In the Form Design and Data Design we can create form and data",
         "type": "wiring"
     },
     {
         "id": "Data and Property ",
         "description": "All the Data has the Property and value Associated with It",
         "type": "wiring"
     },
     {
         "id": "Entity Query",
         "description": "Entity Queries can be used to create Entity Relationship ",
         "type": "wiring"
     },
     {
         "id": "Entity Query and Entity Data",
         "description": "Entity Data Can be used to create ",
         "type": "wiring"
     }
            ]

所以现在与节点关联的数据将变为：

var nodes = svg.selectAll(".rect")
                        .data(nodesdata)

节点创建后接下来制作文本：

var texts = svg.selectAll(".text")
                       .data(nodesdata)
                       .enter()
                       .append("text")
                       .attr("x", 50)
                       .attr("y", 40)
                       .attr("fill","white")
                       .attr("font-family","sans-serif")
                       .attr("font-size","15px")
                       .text(function (d) { return d.id;});

工作代码here

【讨论】：

它有效..非常感谢西里尔...你能告诉我我的代码有什么问题吗..只是为了避免将来出错.....
问题是SVG中没有zindex，所以要在节点顶部显示文本，我们首先制作节点或圆圈然后制作文本，因此文本将出现在节点顶部。
这真的对我作为 D3.js 的新手解释了很多......再次非常感谢......如果我有任何疑问，会回复你......如果你不这样做，不介意你能告诉我如何在堆栈溢出中启动聊天过程....
嗨西里尔..我还有一个问题..对不起，我不能再问另一个问题了，因为 SO 阻止我的提问 4 天..所以我通过 cmets 提问..你能帮我在我的节点中添加工具提示，以便在我的 [nodesdata] 中显示描述中的内容.....
这可以帮助你coppelia.io/2014/07/…查看工具提示部分