d3/d3-force

Adding labels on top of nodes

mitramir55 opened this issue · 3 comments

mitramir55 commented

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

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

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

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).

  • 👍1