Question

128

Labels / text on the nodes of a D3 force directed graph

rated 0 times [ 129] [ 1] / answers: 1 / hits: 16387 / 12 Years ago, tue, november 13, 2012, 12:00:00

I still not understanding why the code bellow does not display its labels / text...
I have defined the css and set the attribute like the title when the move is over the node:

Json:

{

 nodes:[

   {name:t1,group:1},

   {name:t2,group:1},

   {name:t3,group:1}, 

   {name:t4,group:1},

   {name:hate,group:2},

   {name:good,group:2},

   {name:aiport,group:3},

   {name:flight,group:3}

 ],

 links:[

   {source:0,target:4,value:4},

   {source:0,target:5,value:4},

   {source:1,target:4,value:4},

   {source:2,target:5,value:4},

   {source:3,target:5,value:4},

   {source:4,target:6,value:4},

   {source:5,target:6,value:4},

   {source:5,target:7,value:4}

 ]

}

Code:

<!DOCTYPE html>

<meta charset=utf-8>

<style>



.node {

  fill: #555;

  stroke: #999;

  stroke-width: 1.5px;

}



.link {

  stroke: #999;

  stroke-opacity: .6;

}



</style>

<body>

<script src=http://d3js.org/d3.v3.min.js></script>

    <script>



    var width = 1024,

        height = 768;



    var color = d3.scale.category20();



    var force = d3.layout.force()

        .charge(-120)

        .linkDistance(30)

        .size([width, height]);



    var svg = d3.select(body).append(svg)

        .attr(width, width)

        .attr(height, height);



    d3.json(data.json, function(error, graph) {

      force

          .nodes(graph.nodes)

          .links(graph.links)

          .start();



      var link = svg.selectAll(line.link)

          .data(graph.links)

        .enter().append(line)

          .attr(class, link)

          .style(stroke-width, function(d) { return Math.sqrt(d.value); });



     var node = svg.selectAll(circle.node)

          .data(graph.nodes)



        .enter().append(circle)

          .attr(class, node)

          .attr(r, 5)

          .style(fill, function(d) { return color(d.group); })

          .call(force.drag);



         node.append(title)

          .text(function(d) { return d.name; });



        node.append(text)

          .text(function(d) { return d.name; });





      force.on(tick, function() {

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



        node.attr(cx, function(d) { return d.x; })

            .attr(cy, function(d) { return d.y; });



      });

    });



    </script>

  </body>

</html>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

luna

Add To Favorites

Follow

Total Points: 698

Total Questions: 114

Total Answers: 93

Location: Israel

Member since Wed, Apr 14, 2021

3 Years ago

luna questions

1 TypeError: Cannot read properties of null (reading 'classList')

Tue, Dec 7, 21, 00:00, 3 Years ago

1 None of these files exist

Sun, Jul 11, 21, 00:00, 3 Years ago

1 How to test failed request with axios / jest

Wed, Jun 30, 21, 00:00, 3 Years ago

1 Howler.js - The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page

Tue, May 25, 21, 00:00, 3 Years ago

1 How to get a single doc with React/Firestore?

Sun, Apr 25, 21, 00:00, 3 Years ago

View All

answered 12 Years ago jeffery · Accepted Answer

You are adding the text element inside the circle element - try running your code and have a look at the svg with the DOM inspector. I'm not sure text is allowed there. Instead add the text elements separately - like another rendering of the nodes:

var texts = svg.selectAll(text.label)

                .data(graph.nodes)

                .enter().append(text)

                .attr(class, label)

                .attr(fill, black)

                .text(function(d) {  return d.name;  });



force.on(tick, function() {

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



    node.attr(cx, function(d) { return d.x; })

        .attr(cy, function(d) { return d.y; });



    texts.attr(transform, function(d) {

        return translate( + d.x + , + d.y + );

    });

});