Skip to content Skip to sidebar Skip to footer
Home / D3.js / Data Visualization / Javascript

Labels For Circles Not Showing Up In D3 Data Visualization

Post a Comment
I am following this tutorial to create a node-like data visualization.

Solution 1:

You are not appending text to g elements, you are appending text to circles, let's follow your code to see what the variable node holds:

var node = svg.append("g")    // returns a selection holding a g
    .attr("class", "nodes")     // returns the same g, now with class "nodes"
    .selectAll("circle")        // returns an empty selection as there are no circles yet
    .data(graph.nodes)          // returns the empty selection with bound data
    .enter().append("circle")   // returns a selection of newly entered circles
      .attr("r", 5)             // continues to return the circles
      ...

So node holds a selection of circles, so when using node.append("span") we are attempting to add text to circles, which won't work. So we need to modify this slightly by breaking up your chaining:

var node = svg.append("g")  
  .attr("class", "nodes")
  .selectAll("circle")
  .data(graph.nodes)
  .enter().append("g");  // returns a selection of newly entered g elements

node.append("circle")   // returns a selection of circles, newly append to each g in node
  .attr("r", 5)
  .attr("fill", function(d) { return color(d.group); })
  .call(d3.drag()
      .on("start", dragstarted)
      .on("drag", dragged)
      .on("end", dragended));

And now since node holds a selection of g elements, we can append text as well:

  node.append("text") // returns a selection of text, newly append to each g in node
      .text(function(d) { return d.id; });

There is a change here as well, I've changed node.append("span") to node.append("text"), we are appending svg elements, not html elements to the svg. While the span tags may be appended, it won't display as they aren't svg elements.

Lastly, as in this answer, you need to update the translate of each g in each tick rather than the cx and cy properties because a g isn't positioned by cx and cy attributes:

node
    .attr("transform",function(d) { return"translate("+[d.x,d.y]+")"; });

Here's an demo.

Note, to see your links you need to set a stroke color: .attr("stroke","black'); on your lines

You may like these posts

Post a Comment for "Labels For Circles Not Showing Up In D3 Data Visualization"