search

d3 / d3-force

Force-directed graph layout using velocity Verlet integration.
https://d3js.org/d3-force
ISC License
1.81k stars 376 forks source link

Adding labels on top of nodes #204

Closed mitramir55 closed 2 years ago

mitramir55 commented 2 years ago

Hi,

I'm using this type of graph for two of my projects and wondered if there is any method for labeling the nodes in a graph. For example in observablehq.com/@mitramir55/force-directed-graph I'd like to have the names hover over the nodes.

Thanks.

Fil commented 2 years ago

Sure! the layout only computes x,y positions, but then you're free to use them both to display nodes or texts. Here's an example https://observablehq.com/@d3/mobile-patent-suits

mitramir55 commented 2 years ago

Hi @Fil, sorry for reopening the issue. Could you please take a quick look at this graph? I tried adding the 

  node.append("text")
      .attr("x", 8)
      .attr("y", "0.31em")
      .text(d => d.id)
    .clone(true).lower()
      .attr("fill", "none")
      .attr("stroke", "white")
      .attr("stroke-width", 3);

to the code, but as you can see nothing changes.

Also, I'd be very grateful if you could also help in recolouring the links. All links have a property called color which range between 0 and 1. The higher the value the closer I need them to be to blue and the lower it is the closer the color should be to red.

Any help or link for learning how to do this is also greatly appreciated.

Fil commented 2 years ago

I've sent you a few suggestions. Note that currently the links in the data have no color property: I switched to grey in that case.

PS: If you have further questions about using D3, please open a discussion here instead of an issue, or come talk on D3's slack (follow the link from https://d3js.org/ home page).