md`# Text svg alignment
Lets try the differents alignments for SVG text`
{
const selectorSvg = d3.select(DOM.svg(width, 2500));
// Text anchors
const anchors = selectorSvg
.append('g')
.selectAll()
.data(['start', 'middle', 'end'])
.enter();
const verticalX = width / 2;
anchors
.append('text')
.text(d => 'text-anchor=' + d)
.attr('fill', 'black')
.attr('x', verticalX)
.attr('y', (d,i) => (i+1) * 50)
.attr('font-size', 30)
.attr('text-anchor', d => d)
anchors.append('line')
.attr('y1', (d,i) => (i+1) * 50 - 20)
.attr('y2', (d,i) => (i+1) * 50)
.attr('x1', verticalX)
.attr('x2', verticalX)
.attr('stroke-width', 2)
.attr('stroke', 'red')
// alignment-baseline:
const aligns = selectorSvg
.append('g')
.attr('transform', 'translate(0,170)')
.selectAll()
.data(['baseline', 'before-edge', 'text-before-edge', 'middle', 'central', 'after-edge', 'text-after-edge', 'ideographic', 'alphabetic', 'hanging', 'mathematical', 'top', 'center', 'bottom'])
.enter();
aligns.append('text')
.text('alignment-baseline')
.attr('fill', 'black')
.attr('x', verticalX)
.attr('y', (d,i) => (i+1) * 60)
.attr('font-size', 30)
.attr('text-anchor', 'end')
.attr('alignment-baseline', d => d)
aligns.append('text')
.text(d => d)
.attr('fill', '#9090f0')
.attr('x', verticalX + 30)
.attr('y', (d,i) => (i+1) * 60)
.attr('font-size', 20)
.attr('text-anchor', 'start')
aligns.append('line')
.attr('y1', (d,i) => (i+1) * 60)
.attr('y2', (d,i) => (i+1) * 60)
.attr('x1', verticalX / 2)
.attr('x2', verticalX)
.attr('stroke-width', 1)
.attr('stroke', 'red')
// font styles
const fStyles = selectorSvg
.append('g')
.attr('transform', 'translate(0,1050)')
.selectAll()
.data(['normal', 'italic'])
.enter();
fStyles.append('text')
.text('text Style')
.attr('fill', 'black')
.attr('x', verticalX)
.attr('y', (d,i) => (i+1) * 60)
.attr('font-size', 30)
.attr('text-anchor', 'middle')
.attr('font-style', d => d)
// font-variant
const fVariant = selectorSvg
.append('g')
.attr('transform', 'translate(0,1200)')
.selectAll()
.data(['normal', 'small-caps'])
.enter();
fVariant.append('text')
.text('Font Variant')
.attr('fill', 'black')
.attr('x', verticalX)
.attr('y', (d,i) => (i+1) * 60)
.attr('font-size', 30)
.attr('text-anchor', 'middle')
.attr('font-variant', d => d)
// font strech
const fWeight = selectorSvg
.append('g')
.attr('transform', 'translate(0,1350)')
.selectAll()
.data(['normal', 'bold', 'bolder', 'lighter', '100', '200', '300', '400', '500', '600', '700', '800', '900'])
.enter();
fWeight.append('text')
.text('Font Weight')
.attr('fill', 'black')
.attr('x', verticalX)
.attr('y', (d,i) => (i+1) * 60)
.attr('font-size', 30)
.attr('text-anchor', 'middle')
.attr('font-weight', d => d)
return selectorSvg.node();
}
d3 = require('d3@5.8');
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.
