getBoundingClientRect

100%

getBoundingClientRect

✓ Published0🌍 Public

Last edited Nov 4, 2016

Created on Nov 3, 2016

This example demonstrates how to use the browser's `getBoundingClientRect` method to retrieve the exact screen-space bounding box of an SVG text element, and then draws a semi-transparent rectangle over that area. The text is positioned using a grouped `<g>` element with translation and scaling transforms, along with `dx` and `dy` offsets. The code uses D3 v3 to select and append SVG elements, computing the rectangle’s coordinates by subtracting the SVG’s own client rect from the text’s client rect. The final rectangle is styled with a gray fill and stroke, visually highlighting the text’s bounds.

AI-generated description

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/1160929'>getBBox</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

getBBox

This example demonstrates how to retrieve and display the bounding box of SVG text using the `getBBox()` method. A large text element reading "Hello, getBBox!" is rendered in the center of the canvas, and the code then calculates its exact bounding rectangle. A semi-transparent gray rectangle is drawn over that measured area, highlighting the precise dimensions and position of the text. The implementation uses D3 v3 to append the SVG elements and calls `text.node().getBBox()` to obtain the geometry, with styling applied via inline attributes.

Mmbostock

82% match

Loading thumbnail…

text example

This example demonstrates basic SVG text placement and shape rendering using D3 v4. It positions three text elements with different anchor alignments (start, middle, end) along a horizontal line, showing how the `dx` and `text-anchor` attributes affect text positioning. A polyline traces a jagged path across the canvas, and a circular dot with a lime-green stroke and Indian Red fill uses CSS hover effects to expand its radius and stroke width. The visualization uses D3's selection methods to append elements to an SVG container, with styling applied through inline attributes and CSS classes.

335degrees

72% match

Loading thumbnail…

Untitled

This example demonstrates how to dynamically size an SVG element based on the bounding box of a text label. The page creates a single horizontal line with a centered text annotation, then draws a rounded rectangle behind the text using the dimensions returned by `getBBox()`. The SVG’s width is updated to fit the text plus padding. The code relies on native DOM methods like `createElementNS` and DOM APIs such as `setAttribute` and `getBBox`, with no external visualization libraries.

AAdrian Tudorache

71% match

Loading thumbnail…

block with text

This example demonstrates two labeled rectangles, one red and one blue, each with a corresponding text caption. It shows how static shapes and text can be placed side-by-side in an SVG canvas using D3.js v4. The code selects the body element, appends an SVG container, and uses `append('rect')` to draw each rectangle with explicit `x`, `y`, `width`, and `height` attributes, while `append('text')` adds monospace labels. The positions are calculated manually with variables, and styling is applied via `.style('fill', ...)`. No data loading or dynamic scales are involved, relying solely on hardcoded values.

IIgathi

70% match

Loading thumbnail…

Untitled

Two overlapping rectangles outline the same group of text elements inside an SVG. The green rectangle shows the result of calling `getBBox()`, while the red rectangle shows `getBoundingClientRect()`, highlighting how these two DOM APIs differ in their coordinate systems. The background image is loaded via CSS from Unsplash. The visualization uses vanilla JavaScript to set rectangle attributes based on these API returns, with no external libraries.

RRSSBDAE

69% match

Loading thumbnail…

text example

This example demonstrates how SVG text elements can be positioned and anchored in different ways within a D3 v4 visualization. It shows three text strings placed at the same x-coordinate but with distinct text-anchor values (start, middle, end) and dx offsets, illustrating how alignment affects placement relative to the anchor point. The code also includes a simple circle with a CSS class that applies a hover effect, increasing its radius and stroke width. Using D3's selection and append methods, the visualization creates an SVG canvas and populates it with static text and a single interactive dot.

335degrees

69% match

Loading thumbnail…

SVG Example

This example demonstrates overlapping semi-transparent rectangles in a 500-by-500 SVG canvas, using CSS rgba values to create blended color regions. The visualization is rendered entirely with inline SVG elements, and the page includes a large styled message text via D3's `select` function. Index.js imports D3 and a local ES6 module to set the text content, while styles.css applies a dark background and Ubuntu font. The code shows basic SVG shapes without interaction or data binding, highlighting fundamental SVG rendering and module imports.

JJinlin

68% match

Loading thumbnail…

SVG Example

This SVG example displays three overlapping semi-transparent rectangles in red, blue, and yellow against a dark navy background with large white text. The visualization demonstrates basic vector graphics capabilities using raw SVG elements including rect and text tags within an HTML document. The page imports D3.js via ES6 modules and uses select to update a message div, while external styling comes from Google Fonts and custom CSS. The rendering shows simple shape composition and color blending through opacity.

JJinlin

67% match