Adding links to objects in v7

100%

Adding links to objects in v7

✓ Published0🌍 Public

Last edited Jun 19, 2021

Created on Jun 19, 2021

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.

AI-generated description

The above example is intended to demonstrate adding a hyperlink to an object (the rectangle) and instructing the text object to be transparent to the pointer so that the link on the rectangle is recognised 'through' the text.

This is one of the code samples for the update to the book D3 Tips and Tricks to version 7 of d3.js.

mit Licensed

Similar vizzes

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

91% 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

90% 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

89% 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

84% 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

84% 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

84% match

Loading thumbnail…

D3 Links Example

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.

CCurran Kelleher

78% match

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

74% match