diff --git a/site/js/site.js b/site/js/site.js index 450a219..9bae78a 100644 --- a/site/js/site.js +++ b/site/js/site.js @@ -133,6 +133,24 @@ function onSiteDependenciesLoaded() { data: [{ fn: 'sqrt(1 - x * x)' }, { fn: '-sqrt(1 - x * x)' }] }) + /** + * ### Sticky axes + * + * Set `position: 'sticky'` on an axis to keep it centered + * in the screen and constrained to the viewport on pan and zoom. + */ + functionPlot({ + target: '#sticky', + x: { + position: 'sticky' + }, + y: { + position: 'sticky' + }, + grid: true, + data: [{ fn: 'cos(x)' }] + }) + /** * ### Domain * diff --git a/site/partials/examples.html b/site/partials/examples.html index 9c98f57..7083cbc 100644 --- a/site/partials/examples.html +++ b/site/partials/examples.html @@ -59,7 +59,19 @@ }, grid: true, data: [{ fn: 'sqrt(1 - x * x)' }, { fn: '-sqrt(1 - x * x)' }] -})
Set position: 'sticky'
on an axis to keep it centered
+in the screen and constrained to the viewport on pan and zoom.
functionPlot({
+ target: '#sticky',
+ x: {
+ position: 'sticky'
+ },
+ y: {
+ position: 'sticky'
+ },
+ grid: true,
+ data: [{ fn: 'cos(x)' }]
+})
The domains of both axes can be changed with the following configurations:
xDomain
, defaults to [-7, 7]
Domain
+})