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

unable to show text over the node in d3 force layout

本文关键字：节点 显示 文本 布局 D3      更新时间：2023-09-26

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

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

我的代码如下.....

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

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

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

首先将 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;});

工作代码在这里

相关文章：