textStyle example
Closed this issue · 4 comments
Had a look through the examples but could find one which showed how to adjust the font properties.
On the d3kit-timeline
side they use a key as part of the options
dict called textStyle
:
textStyle: {
'fill': '#fff',
'text-decoration' : function(d){ return d.team==='BRA'? 'none': 'underline'},
'font-weight': function(d){ return d.team==='BRA'? 700: 400}
}
Tried following that structure with the below but didn't make any difference:
"textStyle": {
"fill": "#000",
"text-decoration": "underline",
"font-weight": 700,
}
Is there maybe an example thay you could include in the examples
directory that shows how to use this? Would be interested in changing the font as well.
Hi @mweitzel2005,
Do you mean for the LaTeX output or for SVG output? For LaTeX you can simply style the text in the input data itself, as well as use the preamble
option or the fontsize
option (see the docs). Alternatively you could override the textFn
function in the options dictionary, which will be called on all input dictionaries.
Let me know if that solves your problem.
Overriding the textFn
worked a treat:
"textFn": lambda x: "{\\fontfamily{qcr}\\selectfont" + str(x["time"].year) + " - " + x["text"] + "}",
Couldn't get the preamble
to work but most likely due to my ignorance of Latex. Thanks for the help!
Glad to hear the textFn
function worked!
Some additional font faces: https://www.overleaf.com/learn/latex/Font_typefaces#Reference_guide
-
Set the
fontcode
acronym(?) in @mweitzel2005 's function -
Ex: replace
qcr
withphv
from the reg guide -
Additional resources: https://tug.org/FontCatalogue/
- I can't easily find the 3-4 letter acronyms, but this catalog looks expansive