CODEWITHSUNDEEP
d3.js
Al S
Al S

Reputation: 375

Add text within links in d3.js sankey diagram

I'm trying to create a Sankey diagram based off the example shown here: https://bost.ocks.org/mike/sankey/

While I am able to recreate the diagram, I'd like to write the tooltip text directly onto the links themselves (so they can be read as a static image). I've attempted to add a .append("text") call to the links just like I saw done for the nodes, but it doesn't seem to be working. Below is the code I added to the example above: 

link.append("text")
    .attr("x", 25)
    .attr("y", function(d) { return d.dy / 2; })
    .attr("dy", ".35em")
    .attr("text-anchor", "end")
    .attr("transform", null)
    .text(function(d) { return d.source.name + " → " + d.target.name + "\n" + format(d.value); });
    .attr("text-anchor", "start");

Yet this doesn't show display anything in the diagram.

UPDATE: I pasted Mike Bostock's code into a gist to make recreating the issue easier: http://bl.ocks.org/almsuarez/50eab68a645d7fc12183384000ea8c82

Upvotes: 0

Views: 2384

Answers (1)

thatOneGuy
thatOneGuy

Reputation: 10612

As was said in the comments you can't append text to SVG elements. So say at the moment you append your link to a container. For example :

var link = container.append('path')....//and so on

You have to do the same for text. So, for example : 

var linkText = container.append('text')

You say you can't keep track of the x and y positions ?

Basically as your link is in between two points, you need to find the centre. Here is how I would do it : 

.attr("x", function(d) { console.log(d); return d.source.x + (d.target.x - d.source.x) / 2; })
      .attr("y", function(d) { return d.source.y + (d.target.y - d.source.y) / 2; })

So you get the source' x position then add half the difference of targetX - sourceX and do the same for y.

I have put this in a fiddle for you to see : https://jsfiddle.net/thatOneGuy/8ayq5nwa/2/

You can hover over the links to see the title that way you can check it's all correct :)

Upvotes: 1

Related Questions