Question

我无法在节点顶部显示文字。文本显示在节点下面。

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

我的代码如下.....

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

Answer 1

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

SVG使用画家模型，因此文件后面的对象会在文件中较早的对象上绘制。就像一位画家在以后的事情中重复早期的事情一样。

Answer 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

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

2 个答案: