0

I am making a very basic force-directed graph with labels using the d3.js library. Here is part of my code:

var node = d3.select("#canvas").selectAll(".node")
  .data(data_nodes)
  .enter()
  .append("g")
  .attr("class","node");

var nodes = node.append("circle")
  .style("fill","green")
  .style("r",10);

var text = node.append("text")
  .attr("dx", 20)
  .attr("dy", ".35em")
  .style("z-index",1)
  .text(function(d){
    return d.name;
  });

This goes well at the beginning but due to the shifting location of nodes that occurs with the ticking, these text elements that are supposed to serve as labels get covered up by other nodes. I would like to know if there is a way to solve this problem.

altocumulus
  • 21,179
  • 13
  • 61
  • 84
antande
  • 169
  • 1
  • 13
  • please post your full code along with the data... – Cyril Cherian Apr 17 '16 at 10:35
  • There's no such thing as a z index property for SVG elements. Stacking context is determined by the order you append them in the DOM. [This question](http://stackoverflow.com/questions/17786618/how-to-use-z-index-in-svg-elements) should help. You can also take a look at the 'use' element [here](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use). – Greg Venech Apr 17 '16 at 19:34

0 Answers0