Skip to content

multiline text #677

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 12 commits into from
Jan 19, 2022
Merged

multiline text #677

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
f854feb
multiline text
mbostock Jan 17, 2022
0e9cfb7
lineHeight option
mbostock Jan 17, 2022
a56666e
skip empty lines
mbostock Jan 17, 2022
0b58a98
use x, y and dy when there is no rotate (#682)
Fil Jan 19, 2022
42c0eea
minimize diff
mbostock Jan 19, 2022
5c99e41
fix choropleth label alignment
mbostock Jan 19, 2022
a24cc2a
more test fixes
mbostock Jan 19, 2022
7236479
tweak wheel example
mbostock Jan 19, 2022
91a6fc0
Update README
mbostock Jan 19, 2022
14ed9f8
Update README
mbostock Jan 19, 2022
a9f0ec2
Update README
mbostock Jan 19, 2022
cc145fc
Merge branch 'main' into mbostock/multiline
mbostock Jan 19, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 40 additions & 22 deletions src/marks/text.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import {create} from "d3";
import {create, isoFormat, namespaces} from "d3";
import {nonempty} from "../defined.js";
import {indexOf, identity, string, maybeNumberChannel, maybeTuple, numberChannel, isNumeric, isTemporal} from "../options.js";
import {formatNumber} from "../format.js";
import {indexOf, identity, string, maybeNumberChannel, maybeTuple, numberChannel, isNumeric, isTemporal, keyword} from "../options.js";
import {Mark} from "../plot.js";
import {applyChannelStyles, applyDirectStyles, applyIndirectStyles, applyAttr, applyText, applyTransform, offset} from "../style.js";
import {applyChannelStyles, applyDirectStyles, applyIndirectStyles, applyAttr, applyTransform, offset, impliedString} from "../style.js";

const defaults = {
strokeLinejoin: "round"
Expand All @@ -15,13 +16,12 @@ export class Text extends Mark {
y,
text = indexOf,
textAnchor,
lineAnchor = "middle",
fontFamily,
fontSize,
fontStyle,
fontVariant,
fontWeight,
dx,
dy = "0.32em",
rotate
} = options;
const [vrotate, crotate] = maybeNumberChannel(rotate, 0);
Expand All @@ -39,44 +39,68 @@ export class Text extends Mark {
defaults
);
this.rotate = crotate;
this.textAnchor = string(textAnchor);
this.textAnchor = impliedString(textAnchor, "middle");
this.lineAnchor = keyword(lineAnchor, "lineAnchor", ["top", "middle", "bottom"]);
this.fontFamily = string(fontFamily);
this.fontSize = cfontSize;
this.fontStyle = string(fontStyle);
this.fontVariant = string(fontVariant);
this.fontWeight = string(fontWeight);
this.dx = string(dx);
this.dy = string(dy);
}
render(index, {x, y}, channels, dimensions) {
const {x: X, y: Y, rotate: R, text: T, fontSize: FS} = channels;
const {width, height, marginTop, marginRight, marginBottom, marginLeft} = dimensions;
const {rotate} = this;
const {dx, dy, rotate} = this;
const cx = (marginLeft + width - marginRight) / 2;
const cy = (marginTop + height - marginBottom) / 2;
return create("svg:g")
.call(applyIndirectTextStyles, this, T)
.call(applyTransform, x, y, offset, offset)
.call(applyTransform, x, y, offset + dx, offset + dy)
.call(g => g.selectAll()
.data(index)
.join("text")
.call(applyDirectTextStyles, this)
.call(R ? text => text.attr("transform", X && Y ? i => `translate(${X[i]},${Y[i]}) rotate(${R[i]})`
.call(applyDirectStyles, this)
.attr("transform", R ? (X && Y ? i => `translate(${X[i]},${Y[i]}) rotate(${R[i]})`
: X ? i => `translate(${X[i]},${cy}) rotate(${R[i]})`
: Y ? i => `translate(${cx},${Y[i]}) rotate(${R[i]})`
: i => `translate(${cx},${cy}) rotate(${R[i]})`)
: rotate ? text => text.attr("transform", X && Y ? i => `translate(${X[i]},${Y[i]}) rotate(${rotate})`
: rotate ? (X && Y ? i => `translate(${X[i]},${Y[i]}) rotate(${rotate})`
: X ? i => `translate(${X[i]},${cy}) rotate(${rotate})`
: Y ? i => `translate(${cx},${Y[i]}) rotate(${rotate})`
: `translate(${cx},${cy}) rotate(${rotate})`)
: text => text.attr("x", X ? i => X[i] : cx).attr("y", Y ? i => Y[i] : cy))
: (X && Y ? i => `translate(${X[i]},${Y[i]})`
: X ? i => `translate(${X[i]},${cy})`
: Y ? i => `translate(${cx},${Y[i]})`
: `translate(${cx},${cy})`))
.call(applyAttr, "font-size", FS && (i => FS[i]))
.call(applyText, T)
.call(applyChannelStyles, this, channels))
.call(applyChannelStyles, this, channels)
.call(applyMultilineText, this, T))
.node();
}
}

function applyMultilineText(selection, {lineAnchor}, T) {
if (!T) return;
const format = isTemporal(T) ? isoFormat : isNumeric(T) ? formatNumber() : string;
selection.each(function(i) {
const lines = format(T[i]).split(/\r\n?|\n/g);
const n = lines.length;
const y = lineAnchor === "top" ? 0.71 : lineAnchor === "bottom" ? 1 - n : (164 - n * 100) / 200;
if (n > 1) {
for (let i = 0; i < n; ++i) {
const tspan = document.createElementNS(namespaces.svg, "tspan");
tspan.setAttribute("x", 0);
tspan.setAttribute("y", `${y + i}em`);
tspan.textContent = lines[i];
this.appendChild(tspan);
}
} else {
if (y) this.setAttribute("y", `${y}em`);
this.textContent = lines[0];
}
});
}

export function text(data, {x, y, ...options} = {}) {
([x, y] = maybeTuple(x, y));
return new Text(data, {...options, x, y});
Expand All @@ -99,9 +123,3 @@ function applyIndirectTextStyles(selection, mark, T) {
applyAttr(selection, "font-variant", mark.fontVariant === undefined && (isNumeric(T) || isTemporal(T)) ? "tabular-nums" : mark.fontVariant);
applyAttr(selection, "font-weight", mark.fontWeight);
}

function applyDirectTextStyles(selection, mark) {
applyDirectStyles(selection, mark);
applyAttr(selection, "dx", mark.dx);
applyAttr(selection, "dy", mark.dy);
}
5 changes: 3 additions & 2 deletions test/marks/text-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,9 @@ it("text() has the expected defaults", () => {
assert.strictEqual(text.mixBlendMode, undefined);
assert.strictEqual(text.shapeRendering, undefined);
assert.strictEqual(text.textAnchor, undefined);
assert.strictEqual(text.dx, undefined);
assert.strictEqual(text.dy, "0.32em");
assert.strictEqual(text.lineAnchor, "middle");
assert.strictEqual(text.dx, 0);
assert.strictEqual(text.dy, 0);
assert.strictEqual(text.rotate, 0);
});

Expand Down
10 changes: 5 additions & 5 deletions test/output/caltrain.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,11 +46,11 @@
white-space: pre;
}
</style>
<g text-anchor="start" transform="translate(0.5,0.5)"><text dy="0.32em" x="149.375" y="18">Northbound</text></g>
<g text-anchor="end" transform="translate(0.5,0.5)"><text dy="0.32em" x="89.625" y="18">Southbound</text></g>
<g transform="translate(0.5,0.5)"><text dy="0.32em" x="119.5" y="62">5a</text><text dy="0.32em" x="119.5" y="392">8p</text><text dy="0.32em" x="119.5" y="414">9p</text><text dy="0.32em" x="119.5" y="436">10p</text><text dy="0.32em" x="119.5" y="458">11p</text><text dy="0.32em" x="119.5" y="128">8a</text><text dy="0.32em" x="119.5" y="150">9a</text><text dy="0.32em" x="119.5" y="326">5p</text><text dy="0.32em" x="119.5" y="348">6p</text><text dy="0.32em" x="119.5" y="172">10a</text><text dy="0.32em" x="119.5" y="194">11a</text><text dy="0.32em" x="119.5" y="216">12p</text><text dy="0.32em" x="119.5" y="238">1p</text><text dy="0.32em" x="119.5" y="260">2p</text><text dy="0.32em" x="119.5" y="282">3p</text><text dy="0.32em" x="119.5" y="304">4p</text><text dy="0.32em" x="119.5" y="84">6a</text><text dy="0.32em" x="119.5" y="106">7a</text><text dy="0.32em" x="119.5" y="370">7p</text><text dy="0.32em" x="119.5" y="480">12a</text></g>
<g text-anchor="start" transform="translate(0.5,0.5)"><text dy="0.32em" x="149.375" y="62" fill="currentColor">01</text><text dy="0.32em" x="149.375" y="392" fill="currentColor">01</text><text dy="0.32em" x="149.375" y="414" fill="currentColor">01</text><text dy="0.32em" x="149.375" y="436" fill="currentColor">01</text><text dy="0.32em" x="149.375" y="458" fill="currentColor">01</text><text dy="0.32em" x="149.375" y="84" fill="brown">05</text><text dy="0.32em" x="149.375" y="106" fill="brown">05</text><text dy="0.32em" x="149.375" y="128" fill="brown">05</text><text dy="0.32em" x="149.375" y="326" fill="brown">06</text><text dy="0.32em" x="149.375" y="348" fill="brown">06</text><text dy="0.32em" x="149.375" y="370" fill="peru">10</text><text dy="0.32em" x="149.375" y="150" fill="peru">11</text><text dy="0.32em" x="149.375" y="172" fill="peru">11</text><text dy="0.32em" x="149.375" y="282" fill="peru">11</text><text dy="0.32em" x="179.25" y="106" fill="peru">16</text><text dy="0.32em" x="179.25" y="128" fill="peru">16</text><text dy="0.32em" x="149.375" y="304" fill="peru">16</text><text dy="0.32em" x="179.25" y="326" fill="peru">16</text><text dy="0.32em" x="179.25" y="348" fill="peru">16</text><text dy="0.32em" x="179.25" y="370" fill="currentColor">21</text><text dy="0.32em" x="179.25" y="84" fill="brown">23</text><text dy="0.32em" x="209.125" y="106" fill="brown">23</text><text dy="0.32em" x="209.125" y="128" fill="brown">23</text><text dy="0.32em" x="179.25" y="304" fill="peru">24</text><text dy="0.32em" x="209.125" y="326" fill="peru">24</text><text dy="0.32em" x="209.125" y="348" fill="peru">24</text><text dy="0.32em" x="179.25" y="62" fill="currentColor">36</text><text dy="0.32em" x="209.125" y="84" fill="peru">36</text><text dy="0.32em" x="239" y="106" fill="peru">36</text><text dy="0.32em" x="239" y="128" fill="peru">36</text><text dy="0.32em" x="179.25" y="282" fill="currentColor">38</text><text dy="0.32em" x="179.25" y="150" fill="currentColor">41</text><text dy="0.32em" x="179.25" y="172" fill="currentColor">41</text><text dy="0.32em" x="149.375" y="194" fill="currentColor">41</text><text dy="0.32em" x="149.375" y="216" fill="currentColor">41</text><text dy="0.32em" x="149.375" y="238" fill="currentColor">41</text><text dy="0.32em" x="149.375" y="260" fill="currentColor">41</text><text dy="0.32em" x="239" y="326" fill="peru">54</text><text dy="0.32em" x="239" y="348" fill="peru">54</text></g>
<g text-anchor="end" transform="translate(0.5,0.5)"><text dy="0.32em" x="89.625" y="128" fill="peru">01</text><text dy="0.32em" x="89.625" y="150" fill="peru">01</text><text dy="0.32em" x="89.625" y="326" fill="peru">01</text><text dy="0.32em" x="89.625" y="348" fill="peru">02</text><text dy="0.32em" x="89.625" y="172" fill="currentColor">03</text><text dy="0.32em" x="89.625" y="194" fill="currentColor">03</text><text dy="0.32em" x="89.625" y="216" fill="currentColor">03</text><text dy="0.32em" x="89.625" y="238" fill="currentColor">03</text><text dy="0.32em" x="89.625" y="260" fill="currentColor">03</text><text dy="0.32em" x="89.625" y="282" fill="currentColor">03</text><text dy="0.32em" x="89.625" y="304" fill="currentColor">03</text><text dy="0.32em" x="59.75" y="326" fill="brown">12</text><text dy="0.32em" x="59.75" y="348" fill="brown">12</text><text dy="0.32em" x="89.625" y="370" fill="brown">12</text><text dy="0.32em" x="89.625" y="106" fill="peru">18</text><text dy="0.32em" x="59.75" y="128" fill="peru">18</text><text dy="0.32em" x="59.75" y="150" fill="peru">18</text><text dy="0.32em" x="89.625" y="84" fill="currentColor">21</text><text dy="0.32em" x="59.75" y="172" fill="peru">25</text><text dy="0.32em" x="59.75" y="282" fill="peru">25</text><text dy="0.32em" x="59.75" y="304" fill="peru">25</text><text dy="0.32em" x="59.75" y="106" fill="peru">26</text><text dy="0.32em" x="29.875" y="128" fill="peru">26</text><text dy="0.32em" x="29.875" y="150" fill="peru">26</text><text dy="0.32em" x="89.625" y="392" fill="currentColor">26</text><text dy="0.32em" x="89.625" y="414" fill="currentColor">36</text><text dy="0.32em" x="89.625" y="436" fill="currentColor">36</text><text dy="0.32em" x="89.625" y="458" fill="currentColor">36</text><text dy="0.32em" x="29.875" y="326" fill="peru">38</text><text dy="0.32em" x="29.875" y="348" fill="peru">38</text><text dy="0.32em" x="59.75" y="370" fill="peru">38</text><text dy="0.32em" x="29.875" y="304" fill="brown">44</text><text dy="0.32em" x="0" y="326" fill="brown">49</text><text dy="0.32em" x="0" y="348" fill="brown">49</text><text dy="0.32em" x="89.625" y="62" fill="currentColor">51</text><text dy="0.32em" x="29.875" y="106" fill="brown">51</text><text dy="0.32em" x="0" y="128" fill="brown">51</text><text dy="0.32em" x="59.75" y="84" fill="peru">57</text><text dy="0.32em" x="89.625" y="480" fill="currentColor">57</text></g>
<g text-anchor="start" transform="translate(0.5,0.5)"><text transform="translate(149.375,18)" y="0.32em">Northbound</text></g>
<g text-anchor="end" transform="translate(0.5,0.5)"><text transform="translate(89.625,18)" y="0.32em">Southbound</text></g>
<g transform="translate(0.5,0.5)"><text transform="translate(119.5,62)" y="0.32em">5a</text><text transform="translate(119.5,392)" y="0.32em">8p</text><text transform="translate(119.5,414)" y="0.32em">9p</text><text transform="translate(119.5,436)" y="0.32em">10p</text><text transform="translate(119.5,458)" y="0.32em">11p</text><text transform="translate(119.5,128)" y="0.32em">8a</text><text transform="translate(119.5,150)" y="0.32em">9a</text><text transform="translate(119.5,326)" y="0.32em">5p</text><text transform="translate(119.5,348)" y="0.32em">6p</text><text transform="translate(119.5,172)" y="0.32em">10a</text><text transform="translate(119.5,194)" y="0.32em">11a</text><text transform="translate(119.5,216)" y="0.32em">12p</text><text transform="translate(119.5,238)" y="0.32em">1p</text><text transform="translate(119.5,260)" y="0.32em">2p</text><text transform="translate(119.5,282)" y="0.32em">3p</text><text transform="translate(119.5,304)" y="0.32em">4p</text><text transform="translate(119.5,84)" y="0.32em">6a</text><text transform="translate(119.5,106)" y="0.32em">7a</text><text transform="translate(119.5,370)" y="0.32em">7p</text><text transform="translate(119.5,480)" y="0.32em">12a</text></g>
<g text-anchor="start" transform="translate(0.5,0.5)"><text transform="translate(149.375,62)" fill="currentColor" y="0.32em">01</text><text transform="translate(149.375,392)" fill="currentColor" y="0.32em">01</text><text transform="translate(149.375,414)" fill="currentColor" y="0.32em">01</text><text transform="translate(149.375,436)" fill="currentColor" y="0.32em">01</text><text transform="translate(149.375,458)" fill="currentColor" y="0.32em">01</text><text transform="translate(149.375,84)" fill="brown" y="0.32em">05</text><text transform="translate(149.375,106)" fill="brown" y="0.32em">05</text><text transform="translate(149.375,128)" fill="brown" y="0.32em">05</text><text transform="translate(149.375,326)" fill="brown" y="0.32em">06</text><text transform="translate(149.375,348)" fill="brown" y="0.32em">06</text><text transform="translate(149.375,370)" fill="peru" y="0.32em">10</text><text transform="translate(149.375,150)" fill="peru" y="0.32em">11</text><text transform="translate(149.375,172)" fill="peru" y="0.32em">11</text><text transform="translate(149.375,282)" fill="peru" y="0.32em">11</text><text transform="translate(179.25,106)" fill="peru" y="0.32em">16</text><text transform="translate(179.25,128)" fill="peru" y="0.32em">16</text><text transform="translate(149.375,304)" fill="peru" y="0.32em">16</text><text transform="translate(179.25,326)" fill="peru" y="0.32em">16</text><text transform="translate(179.25,348)" fill="peru" y="0.32em">16</text><text transform="translate(179.25,370)" fill="currentColor" y="0.32em">21</text><text transform="translate(179.25,84)" fill="brown" y="0.32em">23</text><text transform="translate(209.125,106)" fill="brown" y="0.32em">23</text><text transform="translate(209.125,128)" fill="brown" y="0.32em">23</text><text transform="translate(179.25,304)" fill="peru" y="0.32em">24</text><text transform="translate(209.125,326)" fill="peru" y="0.32em">24</text><text transform="translate(209.125,348)" fill="peru" y="0.32em">24</text><text transform="translate(179.25,62)" fill="currentColor" y="0.32em">36</text><text transform="translate(209.125,84)" fill="peru" y="0.32em">36</text><text transform="translate(239,106)" fill="peru" y="0.32em">36</text><text transform="translate(239,128)" fill="peru" y="0.32em">36</text><text transform="translate(179.25,282)" fill="currentColor" y="0.32em">38</text><text transform="translate(179.25,150)" fill="currentColor" y="0.32em">41</text><text transform="translate(179.25,172)" fill="currentColor" y="0.32em">41</text><text transform="translate(149.375,194)" fill="currentColor" y="0.32em">41</text><text transform="translate(149.375,216)" fill="currentColor" y="0.32em">41</text><text transform="translate(149.375,238)" fill="currentColor" y="0.32em">41</text><text transform="translate(149.375,260)" fill="currentColor" y="0.32em">41</text><text transform="translate(239,326)" fill="peru" y="0.32em">54</text><text transform="translate(239,348)" fill="peru" y="0.32em">54</text></g>
<g text-anchor="end" transform="translate(0.5,0.5)"><text transform="translate(89.625,128)" fill="peru" y="0.32em">01</text><text transform="translate(89.625,150)" fill="peru" y="0.32em">01</text><text transform="translate(89.625,326)" fill="peru" y="0.32em">01</text><text transform="translate(89.625,348)" fill="peru" y="0.32em">02</text><text transform="translate(89.625,172)" fill="currentColor" y="0.32em">03</text><text transform="translate(89.625,194)" fill="currentColor" y="0.32em">03</text><text transform="translate(89.625,216)" fill="currentColor" y="0.32em">03</text><text transform="translate(89.625,238)" fill="currentColor" y="0.32em">03</text><text transform="translate(89.625,260)" fill="currentColor" y="0.32em">03</text><text transform="translate(89.625,282)" fill="currentColor" y="0.32em">03</text><text transform="translate(89.625,304)" fill="currentColor" y="0.32em">03</text><text transform="translate(59.75,326)" fill="brown" y="0.32em">12</text><text transform="translate(59.75,348)" fill="brown" y="0.32em">12</text><text transform="translate(89.625,370)" fill="brown" y="0.32em">12</text><text transform="translate(89.625,106)" fill="peru" y="0.32em">18</text><text transform="translate(59.75,128)" fill="peru" y="0.32em">18</text><text transform="translate(59.75,150)" fill="peru" y="0.32em">18</text><text transform="translate(89.625,84)" fill="currentColor" y="0.32em">21</text><text transform="translate(59.75,172)" fill="peru" y="0.32em">25</text><text transform="translate(59.75,282)" fill="peru" y="0.32em">25</text><text transform="translate(59.75,304)" fill="peru" y="0.32em">25</text><text transform="translate(59.75,106)" fill="peru" y="0.32em">26</text><text transform="translate(29.875,128)" fill="peru" y="0.32em">26</text><text transform="translate(29.875,150)" fill="peru" y="0.32em">26</text><text transform="translate(89.625,392)" fill="currentColor" y="0.32em">26</text><text transform="translate(89.625,414)" fill="currentColor" y="0.32em">36</text><text transform="translate(89.625,436)" fill="currentColor" y="0.32em">36</text><text transform="translate(89.625,458)" fill="currentColor" y="0.32em">36</text><text transform="translate(29.875,326)" fill="peru" y="0.32em">38</text><text transform="translate(29.875,348)" fill="peru" y="0.32em">38</text><text transform="translate(59.75,370)" fill="peru" y="0.32em">38</text><text transform="translate(29.875,304)" fill="brown" y="0.32em">44</text><text transform="translate(0,326)" fill="brown" y="0.32em">49</text><text transform="translate(0,348)" fill="brown" y="0.32em">49</text><text transform="translate(89.625,62)" fill="currentColor" y="0.32em">51</text><text transform="translate(29.875,106)" fill="brown" y="0.32em">51</text><text transform="translate(0,128)" fill="brown" y="0.32em">51</text><text transform="translate(59.75,84)" fill="peru" y="0.32em">57</text><text transform="translate(89.625,480)" fill="currentColor" y="0.32em">57</text></g>
<g stroke="currentColor" transform="translate(0.5,0)">
<line x1="104.5625" x2="104.5625" y1="0" y2="519"></line>
<line x1="134.4375" x2="134.4375" y1="0" y2="519"></line>
Expand Down
Loading