Skip to content
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

Jump to bottom

use x, y and dy when there is no rotate #682

Merged
merged 3 commits into from
Jan 19, 2022
Merged

use x, y and dy when there is no rotate #682

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ead47fd
use x, y and dy when there is no rotate
Fil Jan 19, 2022
2b067fa
use selection.call to branch
mbostock Jan 19, 2022
fa4aa6a
remove duplicate test
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
8 changes: 4 additions & 4 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1068,7 +1068,7 @@ If an **interval** is specified, such as d3.utcDay, **x1** and **x2** can be der

The following channels are required:

* **text** - the text contents (a string)
* **text** - the text contents (a string); if the string contains line break characters, the mark will wrap each line in a tspan and create a multiline text.

If **text** is not specified, it defaults to [0, 1, 2, …] so that something is visible by default. Due to the design of SVG, each label is currently limited to one line; in the future we may support multiline text. [#327](https://github.com/observablehq/plot/pull/327) For embedding numbers and dates into text, consider [*number*.toLocaleString](https://observablehq.com/@mbostock/number-formatting), [*date*.toLocaleString](https://observablehq.com/@mbostock/date-formatting), [d3-format](https://github.com/d3/d3-format), or [d3-time-format](https://github.com/d3/d3-time-format).

Expand All @@ -1081,9 +1081,9 @@ In addition to the [standard mark options](#marks), the following optional chann

The following text-specific constant options are also supported:

* **textAnchor** - TODO
* **lineAnchor** - TODO
* **lineHeight** - TODO
* **textAnchor** - the [text anchor](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor); start, end, or middle (default)
* **lineAnchor** - for multiline text, the vertical line anchor; top, bottom, or middle (default)
* **lineHeight** - for multiline text,the line height factor; defaults to 1.0, which corresponds to a CSS length of 1em
* **fontFamily** - the font name; defaults to [system-ui](https://drafts.csswg.org/css-fonts-4/#valdef-font-family-system-ui)
* **fontSize** - the font size in pixels; defaults to 10
* **fontStyle** - the [font style](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style); defaults to normal
Expand Down
15 changes: 6 additions & 9 deletions src/marks/text.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,21 +62,18 @@ export class Text extends Mark {
.data(index)
.join("text")
.call(applyDirectStyles, this)
.attr("transform", R ? (X && Y ? i => `translate(${X[i]},${Y[i]}) rotate(${R[i]})`
.call(R ? text => text.attr("transform", 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 ? (X && Y ? i => `translate(${X[i]},${Y[i]}) rotate(${rotate})`
: rotate ? text => text.attr("transform", 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})`)
: (X && Y ? i => `translate(${X[i]},${Y[i]})`
: X ? i => `translate(${X[i]},${cy})`
: Y ? i => `translate(${cx},${Y[i]})`
: `translate(${cx},${cy})`))
: text => text.attr("x", X ? i => X[i] : cx).attr("y", Y ? i => Y[i] : cy))
.call(applyAttr, "font-size", FS && (i => FS[i]))
.call(applyChannelStyles, this, channels)
.call(applyMultilineText, this, T))
.call(applyMultilineText, this, T)
.call(applyChannelStyles, this, channels))
.node();
}
}
Expand All @@ -98,7 +95,7 @@ function applyMultilineText(selection, {lineAnchor, lineHeight}, T) {
this.appendChild(tspan);
}
} else {
if (y) this.setAttribute("y", `${y * lineHeight}em`);
if (y) this.setAttribute("dy", `${y * lineHeight}em`);
this.textContent = lines[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 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 text-anchor="start" transform="translate(0.5,0.5)"><text x="149.375" y="18" dy="0.32em">Northbound</text></g>
<g text-anchor="end" transform="translate(0.5,0.5)"><text x="89.625" y="18" dy="0.32em">Southbound</text></g>
<g transform="translate(0.5,0.5)"><text x="119.5" y="62" dy="0.32em">5a</text><text x="119.5" y="392" dy="0.32em">8p</text><text x="119.5" y="414" dy="0.32em">9p</text><text x="119.5" y="436" dy="0.32em">10p</text><text x="119.5" y="458" dy="0.32em">11p</text><text x="119.5" y="128" dy="0.32em">8a</text><text x="119.5" y="150" dy="0.32em">9a</text><text x="119.5" y="326" dy="0.32em">5p</text><text x="119.5" y="348" dy="0.32em">6p</text><text x="119.5" y="172" dy="0.32em">10a</text><text x="119.5" y="194" dy="0.32em">11a</text><text x="119.5" y="216" dy="0.32em">12p</text><text x="119.5" y="238" dy="0.32em">1p</text><text x="119.5" y="260" dy="0.32em">2p</text><text x="119.5" y="282" dy="0.32em">3p</text><text x="119.5" y="304" dy="0.32em">4p</text><text x="119.5" y="84" dy="0.32em">6a</text><text x="119.5" y="106" dy="0.32em">7a</text><text x="119.5" y="370" dy="0.32em">7p</text><text x="119.5" y="480" dy="0.32em">12a</text></g>
<g text-anchor="start" transform="translate(0.5,0.5)"><text x="149.375" y="62" dy="0.32em" fill="currentColor">01</text><text x="149.375" y="392" dy="0.32em" fill="currentColor">01</text><text x="149.375" y="414" dy="0.32em" fill="currentColor">01</text><text x="149.375" y="436" dy="0.32em" fill="currentColor">01</text><text x="149.375" y="458" dy="0.32em" fill="currentColor">01</text><text x="149.375" y="84" dy="0.32em" fill="brown">05</text><text x="149.375" y="106" dy="0.32em" fill="brown">05</text><text x="149.375" y="128" dy="0.32em" fill="brown">05</text><text x="149.375" y="326" dy="0.32em" fill="brown">06</text><text x="149.375" y="348" dy="0.32em" fill="brown">06</text><text x="149.375" y="370" dy="0.32em" fill="peru">10</text><text x="149.375" y="150" dy="0.32em" fill="peru">11</text><text x="149.375" y="172" dy="0.32em" fill="peru">11</text><text x="149.375" y="282" dy="0.32em" fill="peru">11</text><text x="179.25" y="106" dy="0.32em" fill="peru">16</text><text x="179.25" y="128" dy="0.32em" fill="peru">16</text><text x="149.375" y="304" dy="0.32em" fill="peru">16</text><text x="179.25" y="326" dy="0.32em" fill="peru">16</text><text x="179.25" y="348" dy="0.32em" fill="peru">16</text><text x="179.25" y="370" dy="0.32em" fill="currentColor">21</text><text x="179.25" y="84" dy="0.32em" fill="brown">23</text><text x="209.125" y="106" dy="0.32em" fill="brown">23</text><text x="209.125" y="128" dy="0.32em" fill="brown">23</text><text x="179.25" y="304" dy="0.32em" fill="peru">24</text><text x="209.125" y="326" dy="0.32em" fill="peru">24</text><text x="209.125" y="348" dy="0.32em" fill="peru">24</text><text x="179.25" y="62" dy="0.32em" fill="currentColor">36</text><text x="209.125" y="84" dy="0.32em" fill="peru">36</text><text x="239" y="106" dy="0.32em" fill="peru">36</text><text x="239" y="128" dy="0.32em" fill="peru">36</text><text x="179.25" y="282" dy="0.32em" fill="currentColor">38</text><text x="179.25" y="150" dy="0.32em" fill="currentColor">41</text><text x="179.25" y="172" dy="0.32em" fill="currentColor">41</text><text x="149.375" y="194" dy="0.32em" fill="currentColor">41</text><text x="149.375" y="216" dy="0.32em" fill="currentColor">41</text><text x="149.375" y="238" dy="0.32em" fill="currentColor">41</text><text x="149.375" y="260" dy="0.32em" fill="currentColor">41</text><text x="239" y="326" dy="0.32em" fill="peru">54</text><text x="239" y="348" dy="0.32em" fill="peru">54</text></g>
<g text-anchor="end" transform="translate(0.5,0.5)"><text x="89.625" y="128" dy="0.32em" fill="peru">01</text><text x="89.625" y="150" dy="0.32em" fill="peru">01</text><text x="89.625" y="326" dy="0.32em" fill="peru">01</text><text x="89.625" y="348" dy="0.32em" fill="peru">02</text><text x="89.625" y="172" dy="0.32em" fill="currentColor">03</text><text x="89.625" y="194" dy="0.32em" fill="currentColor">03</text><text x="89.625" y="216" dy="0.32em" fill="currentColor">03</text><text x="89.625" y="238" dy="0.32em" fill="currentColor">03</text><text x="89.625" y="260" dy="0.32em" fill="currentColor">03</text><text x="89.625" y="282" dy="0.32em" fill="currentColor">03</text><text x="89.625" y="304" dy="0.32em" fill="currentColor">03</text><text x="59.75" y="326" dy="0.32em" fill="brown">12</text><text x="59.75" y="348" dy="0.32em" fill="brown">12</text><text x="89.625" y="370" dy="0.32em" fill="brown">12</text><text x="89.625" y="106" dy="0.32em" fill="peru">18</text><text x="59.75" y="128" dy="0.32em" fill="peru">18</text><text x="59.75" y="150" dy="0.32em" fill="peru">18</text><text x="89.625" y="84" dy="0.32em" fill="currentColor">21</text><text x="59.75" y="172" dy="0.32em" fill="peru">25</text><text x="59.75" y="282" dy="0.32em" fill="peru">25</text><text x="59.75" y="304" dy="0.32em" fill="peru">25</text><text x="59.75" y="106" dy="0.32em" fill="peru">26</text><text x="29.875" y="128" dy="0.32em" fill="peru">26</text><text x="29.875" y="150" dy="0.32em" fill="peru">26</text><text x="89.625" y="392" dy="0.32em" fill="currentColor">26</text><text x="89.625" y="414" dy="0.32em" fill="currentColor">36</text><text x="89.625" y="436" dy="0.32em" fill="currentColor">36</text><text x="89.625" y="458" dy="0.32em" fill="currentColor">36</text><text x="29.875" y="326" dy="0.32em" fill="peru">38</text><text x="29.875" y="348" dy="0.32em" fill="peru">38</text><text x="59.75" y="370" dy="0.32em" fill="peru">38</text><text x="29.875" y="304" dy="0.32em" fill="brown">44</text><text x="0" y="326" dy="0.32em" fill="brown">49</text><text x="0" y="348" dy="0.32em" fill="brown">49</text><text x="89.625" y="62" dy="0.32em" fill="currentColor">51</text><text x="29.875" y="106" dy="0.32em" fill="brown">51</text><text x="0" y="128" dy="0.32em" fill="brown">51</text><text x="59.75" y="84" dy="0.32em" fill="peru">57</text><text x="89.625" y="480" dy="0.32em" fill="currentColor">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