D3 Links Example

100%

D3 Links Example

✓ Published0🌍 Public

Last edited May 28, 2015

Created on May 28, 2015

This example shows how to link SVG visual marks to external web pages by constructing URLs from data properties. Three rectangles each link to a different Wikipedia article, with the hyperlink target generated dynamically from an array of strings. The code uses D3.js (version 3.5.5) to bind data to anchor elements via `selectAll("a").data(data).enter()`, then sets the `xlink:href` attribute using a function that concatenates the data value with the Wikipedia base URL. Each rectangle is positioned with the `attr` method, and the rendering is SVG.

AI-generated description

This example shows how to make several SVG elements link to different things by constructing URLs from data properties. Each square links to a different Wikipedia page, and the link URL is generated dynamically from the data array.

This has the expected behavior of normal links when you open it in a new window. Clicking the rectangle doesn't work correctly in the bl.ocks viewer, because it is in an iFrame (open the debugging console to see the iFrame-related error), but this technique of adding links to visual marks should work fine in your own D3 projects.

This is addressing the thread Hyperlinks - error "undefined"/ NaN in the D3 Google Group.

Similar vizzes

Loading thumbnail…

D3 Link Example

This example demonstrates how to make an SVG element function as a hyperlink in D3, allowing visual marks to navigate to external pages. It renders a single blue rectangle inside an SVG canvas and wraps it with an anchor element using the `xlink:href` attribute to link to Google. The code appends the SVG and rectangle dynamically using D3's selection and chaining methods, with the D3 library loaded from a CDN. The example highlights standard link behavior, such as opening in the current tab or a new tab with the meta key, though it notes that iframe-based viewers may interfere with such interactions.

CCurran Kelleher

84% match

Loading thumbnail…

Adding links to objects in v7

This example shows how to add a hyperlink to an SVG rectangle and make text clickable through it. The code uses d3.v7 to append an anchor element with an `xlink:href` attribute pointing to a Wikipedia page, then adds the rectangle inside the anchor. A separate text element displaying “gongoozler” is positioned over the rectangle and given `style("pointer-events", "none")` so clicks pass through to the linked shape beneath. The SVG is rendered directly in the browser with a lightgreen rounded rectangle.

Dd3noob

78% match

Loading thumbnail…

Adding links to objects

This example shows a light green rectangle with rounded corners as a hyperlink to a Wikipedia article about the word "gongoozler." The text label overlays the rectangle but is set with `pointer-events: none`, allowing clicks to pass through to the link beneath. Using the D3.js library (version 3.5.17), the code appends an anchor element with an `xlink:href` attribute to an SVG, then draws the rectangle and text. The text uses `text-anchor: middle` for centering, and the SVG is rendered inline in the HTML page.

Dd3noob

78% match

Loading thumbnail…

Adding links to objects in v5

This example shows how to make an SVG rectangle clickable as a hyperlink in D3 v5, with text displayed on top that remains transparent to pointer events. It uses d3.select and .append to create the SVG container, an anchor element with xlink:href, and a styled rect element. The text element uses pointer-events set to "none" so clicks pass through to the linked rectangle beneath. The code draws a light-green, rounded rectangle with the word "gongoozler" centered inside, linking to the corresponding Wikipedia page.

Dd3noob

77% match

Loading thumbnail…

addlinkToObj

This example shows a single interactive link: a rounded, light green rectangle labeled “gongoozler” that, when clicked, opens the corresponding Wikipedia page. The visualization demonstrates how to attach a hyperlink to an SVG shape using an `<a>` element with an `xlink:href` attribute. Rendered with D3 v2 and SVG, the code creates the rectangle and centers text over it, with pointer events disabled on the label so clicks pass through to the link. The data source is implicit in the hardcoded word, and the rendering approach relies on standard SVG elements.

BBillalD

77% match

Loading thumbnail…

addlinkToObj

This example shows a single interactive link: a rounded, light-green rectangle labeled with the word “gongoozler” that, when clicked, opens the corresponding Wikipedia page. The visualization uses D3 v2 to append an SVG anchor (`<a>`) with an `xlink:href` attribute pointing to `http://en.wikipedia.org/wiki/gongoozler`, then attaches a `rect` inside it for the clickable area. A separate `text` element, styled with `pointer-events: none`, overlays the label without intercepting clicks. The code hardcodes the word and dimensions, rendering the result as static SVG with no data source or interaction beyond the hyperlink.

BBillalD

76% match

Loading thumbnail…

Adding links to objects in v6

This example demonstrates how to add a hyperlink to an SVG rectangle in D3 v6, with the text "gongoozler" placed on top of it. It shows that the text remains clickable through the rectangle’s link by setting its `pointer-events` style to `"none"`. The code appends an SVG `<a>` element with an `xlink:href` attribute to Wikipedia, then draws the rectangle inside it via `d3.select` and `.append`. The text is added separately using `holder.append("text")`. Rendering uses plain SVG elements created with D3’s selection API.

Dd3noob

75% match

Loading thumbnail…

Adding links to objects in v4

A hyperlink encloses a rounded rectangle, while the text label "gongoozler" sits on top. The example shows how to make a non-rectangular object clickable by adding an anchor element with `xlink:href` to the SVG, and how to let mouse clicks pass through the text to the link below it. The text uses `pointer-events: none`, so hovering or clicking the label triggers the rectangle's link. The code relies on D3 v4's selection and SVG creation methods to build the static graphic and set the necessary attributes.

Dd3noob

70% match