getBBox

100%

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Aug 21, 2011

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.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

getBoundingClientRect

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.

PPhilippe Rivière

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

74% match

Loading thumbnail…

fresh block

This example displays a static SVG canvas containing the text “hello d3” in a large monospace font. The visualization is rendered using d3.v4, with the SVG element appended directly to the body. A single text element is positioned at specific x and y coordinates, with font size and family set via D3’s style method. The code demonstrates basic SVG creation and text styling through D3’s selection and append API.

JJaxonDvl

69% match

Loading thumbnail…

fresh block

This example displays a single static SVG text element reading “hello wo” centered near the top of a 960-by-500-pixel canvas. The code appends an SVG `<text>` node using D3 v4, setting its horizontal and vertical positions, font size, and monospace family. No data source or interactive behavior is present; the visualization simply demonstrates basic SVG text rendering through D3’s selection and attribute methods.

JJoshuaGiowaya

69% match

Loading thumbnail…

test-block

This example displays a single SVG text element that reads “Edit the code below to change me!” positioned at a fixed location within a 960 by 500 pixel viewport. The visualization uses the D3.js v4 library to select the body element, append an SVG container, and place the text using explicit x and y coordinates. The code applies a monospace font and a 36-pixel font size, demonstrating basic SVG text rendering with D3’s selection and attribute methods. No data is loaded; the example serves as a minimal starting point for interactive edits.

BBharath4259

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

69% match

Loading thumbnail…

test

This example displays a static SVG canvas with a single line of instructional text. The code uses D3 v4 to append an SVG element to the body and a text element inside it, styled with a monospace font and positioned at the center. It serves as a minimal placeholder, showing how D3 selections and SVG attributes create basic visual output. The text explicitly invites the user to edit the code, highlighting the template’s purpose as a starting point for further customization. No data or dynamic behavior is involved beyond the initial rendering.

EEssohanamKouyou

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

68% match