CODEWITHSUNDEEP
javascripthtmlcssd3.jssvg
venkateshiyer
venkateshiyer

Reputation: 121

unable to show text over the node in d3 force layout

I'm not able to show the text on top of the node. The Text gets displayed underneath the node instead.

To be exact the node is hiding my test.

My code is as follows.....

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

Upvotes: 1

Views: 270

Answers (2)

Robert Longson
Robert Longson

Reputation: 123995

Move the text creation to be later in the file, i.e after the node creation.

SVG uses a painters model so objects later in the file are drawn on top of objects earlier in the file. Just like a painter overpaints earlier things with later things.

Upvotes: 4

Cyril Cherian
Cyril Cherian

Reputation: 32327

First rename your var nodes to 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"
     }
            ]

So now the data associated with node will become:

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

Next make text after the nodes are created:

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

working code here

Upvotes: 2

Related Questions