Nodes/labels as hyperlinks [getting urls work]

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.

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

Here is the example.

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.

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

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.