Centering Text Inside a Circle / Ben Pyrik

Ben Pyrik

Agrarian cyberpunk.

Workspace

Published

Edited

Nov 5, 2018

3 stars

uncentered = html`<svg width="400px" height="400px">

</svg>`

centeredWithJs = html`<svg width="400px" height="400px">

</svg>`

// Function that takes in an SVG element containing a circle and a text element. Centers the text

// element inside the circle using the text element's bounding box.

function center(example) {

// Get current x and y values.

let letter = d3.select(example).select('text');

let x = Number(letter.attr('x'));

let y = Number(letter.attr('y'));

// Get bounding box and compute the center point.

let bb = letter.node().getBBox();

console.log('Bounding box:', bb);

let centerX = bb.width / 2;

let centerY = bb.height / 4;

console.log(`Center point: (${centerX}, ${centerY})`);

// Adjust x and y.

letter.attr('x', x - centerX);

letter.attr('y', y + centerY);

return [(x - centerX), (y + centerY)];

}

// Call center with the example above.

center(centeredWithJs)

centeredWithProps = html`<svg width="400px" height="400px">

<g>

</g>

</svg>`

centeredManually = html`<svg width="400px" height="400px">

</svg>`

firaCircle = html`<svg width="400px" height="400px">

</svg>`

center(firaCircle)

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.

Learn more