# Hyperlinks in label ?

**URL:** <https://talk.observablehq.com/t/hyperlinks-in-label/3552>\
**Category:** Help\
**Created:** [July 3, 2020, 3:28pm UTC](https://talk.observablehq.com/t/hyperlinks-in-label/3552 "2020-07-03T15:28:09Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![pollux](https://avatars.discourse-cdn.com/v4/letter/p/53a042/32.png) [@pollux](https://talk.observablehq.com/u/pollux)\
**Post date:** [July 3, 2020, 3:28pm UTC](https://talk.observablehq.com/t/hyperlinks-in-label/3552/1 "2020-07-03T15:28:09Z")

</div>

Hi  
I wish I modify some labels in a chord diagram like this:

> **[Chords](https://observablehq.com/@jacobtfisher/chords)**
>
> An Observable notebook by Jacob T. Fisher.

  
or a sankey diagram like this:  

> **[Sankey Diagram](https://observablehq.com/@pbrockmann/sankey-diagram)**
>
> An Observable notebook by Patrick Brockmann.

  
so that they provide links to other pages or files located elsewhere.  
Is it possible ?  
Thank you for attention and eventual help

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [July 3, 2020, 6:08pm UTC](https://talk.observablehq.com/t/hyperlinks-in-label/3552/2 "2020-07-03T18:08:25Z")

</div>

In SVG you can wrap elements inside `<a>` elements to turn them into links.

Be aware that you need to set the attribute `xlink:href` instead of `href`, and that the `<a>` element’s own text (i.e. text nodes) won’t be displayed. Instead you need to put an SVG `<text>` element (or any other SVG element) inside.

For the Chord example, we can get link labels by modifying the `chart` cell. Change this piece of code:

```auto
  group.append("text")
      .each(d => { d.angle = (d.startAngle + d.endAngle) / 2; })
      .attr("dy", ".35em")
      .attr("transform", d => `
        rotate(${(d.angle * 180 / Math.PI - 90)})
        translate(${innerRadius + 26})
        ${d.angle > Math.PI ? "rotate(180)" : ""}
      `)
      .attr("text-anchor", d => d.angle > Math.PI ? "end" : null)
      .text(d => data.name_by_index.get(d.index));

```

to this (_ **edit:** _ _see my next answer for a correction)_:

```auto
  group.append("a")
      .each(d => { d.angle = (d.startAngle + d.endAngle) / 2; })
      .attr("transform", d => `
        rotate(${(d.angle * 180 / Math.PI - 90)})
        translate(${innerRadius + 26})
        ${d.angle > Math.PI ? "rotate(180)" : ""}
      `)
      // Set your links here:
      .attr("xlink:href", d => "#" + data.name_by_index.get(d.index))
      .append("text")
        .attr("dy", ".35em")
        .attr("text-anchor", d => d.angle > Math.PI ? "end" : null)
        .text(d => data.name_by_index.get(d.index));

```

---

<div class="post-metadata">

**Author:** ![pollux](https://avatars.discourse-cdn.com/v4/letter/p/53a042/32.png) [@pollux](https://talk.observablehq.com/u/pollux)\
**Post date:** [July 4, 2020, 7:33am UTC](https://talk.observablehq.com/t/hyperlinks-in-label/3552/3 "2020-07-04T07:33:24Z")

</div>

Thank you mootari for the advice.  
I am not sure I weel understood.  
I tried this:

group.append(“a”)  
.each(d =\> { d.angle = (d.startAngle + d.endAngle) / 2; })  
.attr(“transform”, d =\> ` rotate(${(d.angle * 180 / Math.PI - 90)}) translate(${innerRadius + 26}) ${d.angle > Math.PI ? "rotate(180)" : ""} `)  
// Set your links here:  
.attr(“xlink:href”, d =\> “[https://www.google.com](https://www.google.com)”)  
.append(“text”)  
.attr(“dy”, “.35em”)  
.attr(“text-anchor”, d =\> d.angle \> Math.PI ? “end” : null)  
.text(d =\> data.name\_by\_index.get(d.index));

I can see that, when I point one of the labels with mouse, the target link appears down left my window. But when click the label, I get a white window and not the expected one.  
But if I right click to open link in a new window, it works. Strange.  
Is my adaptation correct ?

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [July 4, 2020, 8:55am UTC](https://talk.observablehq.com/t/hyperlinks-in-label/3552/4 "2020-07-04T08:55:29Z")

</div>

> [@pollux](#):
>
> But when click the label, I get a white window and not the expected one

Whoops, sorry about that.

By default the `target` attribute for [SVG hyperlinks](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a) is set to `self`. So when you click the link, you’re navigating inside the iframe in which your notebook is running. Of course, changing the iframe’s location breaks literally everything.

In order to make your links work, you need to set `target` to `_parent` or `_top` (or, alternatively, to `_blank` to force a new window). Here is a simplified, complete example for an SVG hyperlink:

```auto
html`<svg>
  <a href="https://google.com" target="_top">
    <text y="1.5em">A link</text>
  </a>
</svg>`

```

or with D3:

```auto
{
  const view = d3.create("svg");
  view.append("a")
    .attr("href", "https://google.com")
    .attr("target", "_top")
    .append("text")
      .attr("y", "1.5em")
      .text("A link");
  return view.node();
}

```

_Yes, it’s actually `href`, because `xlink:href` is deprecated (as I found out while researching this)._

---

<div class="post-metadata">

**Author:** ![pollux](https://avatars.discourse-cdn.com/v4/letter/p/53a042/32.png) [@pollux](https://talk.observablehq.com/u/pollux)\
**Post date:** [July 4, 2020, 9:45am UTC](https://talk.observablehq.com/t/hyperlinks-in-label/3552/5 "2020-07-04T09:45:15Z")

</div>

Thank you mootari for the added informations and the link toward SVG hyperlinks.  
I tried with xlink:href and it worked nice. But I upgraded to simple href as you suggested.  
Last question : if I want to apply a different target ling to each label, I suppose I have to define a new constant object welle sized:  
const links\_list = [‘url1’, ‘url2’, … , ‘url12’]  
Yes ?

If so, how to define the application each link \<=\> each label ?

---

<div class="post-metadata">

**Author:** ![pollux](https://avatars.discourse-cdn.com/v4/letter/p/53a042/32.png) [@pollux](https://talk.observablehq.com/u/pollux)\
**Post date:** [July 4, 2020, 8:07pm UTC](https://talk.observablehq.com/t/hyperlinks-in-label/3552/6 "2020-07-04T20:07:19Z")

</div>

And I tried to export figure in svg.  
Great surprise =\> the links remains available.  
But unfotunately, the highlights are not still avalaible after exportation.  
I though svg format allows this. No ?

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [August 3, 2020, 6:13pm UTC](https://talk.observablehq.com/t/hyperlinks-in-label/3552/7 "2020-08-03T18:13:32Z")

</div>

> [@pollux](#):
>
> But unfotunately, the highlights are not still avalaible after exportation.

Can you give a short example? Ideally with a specific notebook link and the cell that you exported, and a description of how the export behaves differently?