Nodes/labels as hyperlinks [getting urls work]

Community Help
1

Hi

My question is relevant to the following issue. But I am struggling with getting urls work upon clicking. Taking Sankey Diagram per example, I thought adding a line .on("click", d => {window.open(d.url, "_blank")}) in const node = svg.append("g") would do the job.

However, upon clicking only a blank tab opens. My csv file has the following structure: source, target, value, url, whereas url contains https://google.com. In addition, I have tried to achieve results with .attr, but also failed to load urls. Could anyone please point me in the right direction? Thanks in advance.

2

Hi, can you please share an example notebook that demonstrates the problem?

3

Here is the example.

4

That won’t work for several reasons:

  • The first argument to the on() callback is the event object. You’ll find the datum in the second argument.
  • There’s no data associated with the element that you’re attaching the handler to.

You’d have to move the handler down to after the join():

    .join("rect")
      .attr("x", d => d.x0)
      .attr("y", d => d.y0)
      .attr("height", d => d.y1 - d.y0)
      .attr("width", d => d.x1 - d.x0)
      .on("click", (e, d) => window.open(d.url, "_blank"))

Note that in this example the data does not contain any URL, so this will still open about:blank.

However, I would recommend to follow the approach that is outlined in the topic that you linked, as this will allow links to work even after you download the SVG.

5

Could you clarify that please? The csv file was updated with a column containing urls.

6

I see … Well, there’s a couple of problems:

  • you’re defining the URL for your links, but expect them to work on nodes (which have several links pointing to and from them)
  • that Sankey diagram does not retain any additional metadata in either nodes or links, so even passing the nodes in explicitely won’t help.

Unfortunately I don’t have a good suggestion right now. A workaround might be to check the title attribute on click (you can capture those events at the root element to avoid a fork) and have a map of title → url ready.