尧图网站建设 
Grafar数据源入门5个内置生成器如何轻松定义集合、序列与区间【免费下载链接】grafarReactive multidimensional math data visualization for the web.项目地址: https://gitcode.com/gh_mirrors/gr/grafarGrafar 是一款面向 Web 的响应式数学与数据可视化库基于 WebGL 与 Three.js 构建它内置 5 个数据源生成器——set、seq、range、logseq、ints——让你用一行代码就能定义集合、等距序列和连续区间为曲线、曲面与粒子动画快速准备数据。为什么做 Grafar 数据可视化要先懂数据源生成器在 Grafar 中每个应用都从一个生成器Generator开始。生成器本质上是对一维数据的描述它负责往数组里填充数字并告诉 Grafar 这些点在图上如何连接即模拟集合的拓扑结构。之后你用grafar.map对它做数学变换就得到新的变量形成数据源 → 变换 → 绘制的响应式数据流。 关键动作生成器创建后通常要调用.select()把它物化成一个可依赖的变量其他变量就可以基于它计算。核心实现在src/core/Generator.ts5 个内置生成器的具体实现在src/generators.ts。快速上手安装 Grafar 并创建第一个数据源npm install grafar # 或者克隆源码 git clone https://gitcode.com/gh_mirrors/gr/grafar用几行代码画一条正弦曲线const x grafar.range(-1, 1, 20).select(); // 区间 [-1, 1] 上的 20 个点 const y grafar.map(x, x 2 * Math.sin(x)); // 变换y 2sin(x) grafar.pin([x, y], grafar.panel(document.getElementById(app))).setAxes([x, y]);数据源由哪个生成器提供直接决定了最终画面是散点、折线还是曲面。5 个内置生成器速查表生成器生成内容点是否相连典型场景grafar.set任意给定数组❌ 离散自定义采样数据grafar.seq[a, b] 等距 n 个点含端点❌ 离散散点、离散参数grafar.range[a, b] 等距 n 个点含端点✅ 相连连续曲线、曲面grafar.logseq[a, b] 对数分布 n 个点✅ 相连起点处波动密集的函数grafar.ints[a, b] 之间的全部整数❌ 离散刻度、离散档位生成器逐一拆解如何选对数据源1. grafar.set把任意数组变成集合const set grafar.set([-1, 0, 1]).select();set是最基础的生成器把普通 JS 数组包装成 Grafar 变量。注意两点元素不要求唯一set([0, 0, 0])就是 3 个 0数组会被浅拷贝之后修改原数组不会影响已绘制的图形。2. grafar.seq等间距的离散序列const seq grafar.seq(-1, 1, 20).select(); // 20 个等距点含端点seq(a, b, n)在 a 与 b 之间生成 n 个等距点但点与点之间不连线效果是一串散点。它很适合做离散参数配合map使用时每个点都能各生成一条曲线。3. grafar.range模拟连续区间 [a, b]const range grafar.range(-1, 1, 20).select();range和seq的区别只有一个点会按顺序连线从而模拟出连续区间[a, b]的拓扑。画连续函数曲线时这是最常用的数据源。4. grafar.logseq靠近起点更密的对数序列const logseq grafar.logseq(0, 10, 100).select();logseq按对数规律分布点数越靠近 a 点越密集往 b 方向逐渐变疏。当你绘制的函数在起点附近变化快、波动多例如 1/x 型或衰减震荡函数用logseq能避免细节被均匀采样漏掉。5. grafar.ints只取整数的离散维度const ints grafar.ints(-2, 2.5).select(); // 得到 [-2, -1, 0, 1, 2]ints(a, b)返回 a 到 b 之间的所有整数含端点非整数端点会自动取整。适合表达离散的档位例如动画从第 1 帧到第 10 帧。进阶技巧让 5 个生成器组合出更丰富的图形 常量也是生成器直接传数字9等价于grafar.set([9]).select()所以pin([x, 2], pan)这样的写法完全合法。两个 range 拼出曲面把两个range一起传给grafar.map自动得到 2D 参数曲面换成一个range 一个seq则得到一组曲线每条对应seq中的一个点。隐式曲线交给 vsolvegrafar.vsolve(f, size, dof)用牛顿法求函数零点能直接画出x² y² 2这类隐式定义的曲线一个 2D 隐式圆的效果。响应式更新更新自由变量的值后所有依赖它的变量和面板会自动重算刷新这是 Grafar 动画的底层机制。延伸阅读相关源码与文档路径 5 个内置生成器 vsolve 的实现src/generators.ts生成器基类select/intosrc/core/Generator.ts官方教程·生成器篇docs/tutorial/2-generators.md官方教程·映射与拓扑篇docs/tutorial/3-mapping.md完整 API 文档docs/api.md掌握了set、seq、range、logseq、ints这 5 个内置生成器你就拿到了 Grafar 数据可视化的第一块积木先用生成器定义集合、序列或区间再用map做数学变换最后pin到面板上图形即刻呈现。【免费下载链接】grafarReactive multidimensional math data visualization for the web.项目地址: https://gitcode.com/gh_mirrors/gr/grafar创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Grafar数据源入门：5个内置生成器如何轻松定义集合、序列与区间
Grafar数据源入门5个内置生成器如何轻松定义集合、序列与区间【免费下载链接】grafarReactive multidimensional math data visualization for the web.项目地址: https://gitcode.com/gh_mirrors/gr/grafarGrafar 是一款面向 Web 的响应式数学与数据可视化库基于 WebGL 与 Three.js 构建它内置 5 个数据源生成器——set、seq、range、logseq、ints——让你用一行代码就能定义集合、等距序列和连续区间为曲线、曲面与粒子动画快速准备数据。为什么做 Grafar 数据可视化要先懂数据源生成器在 Grafar 中每个应用都从一个生成器Generator开始。生成器本质上是对一维数据的描述它负责往数组里填充数字并告诉 Grafar 这些点在图上如何连接即模拟集合的拓扑结构。之后你用grafar.map对它做数学变换就得到新的变量形成数据源 → 变换 → 绘制的响应式数据流。 关键动作生成器创建后通常要调用.select()把它物化成一个可依赖的变量其他变量就可以基于它计算。核心实现在src/core/Generator.ts5 个内置生成器的具体实现在src/generators.ts。快速上手安装 Grafar 并创建第一个数据源npm install grafar # 或者克隆源码 git clone https://gitcode.com/gh_mirrors/gr/grafar用几行代码画一条正弦曲线const x grafar.range(-1, 1, 20).select(); // 区间 [-1, 1] 上的 20 个点 const y grafar.map(x, x 2 * Math.sin(x)); // 变换y 2sin(x) grafar.pin([x, y], grafar.panel(document.getElementById(app))).setAxes([x, y]);数据源由哪个生成器提供直接决定了最终画面是散点、折线还是曲面。5 个内置生成器速查表生成器生成内容点是否相连典型场景grafar.set任意给定数组❌ 离散自定义采样数据grafar.seq[a, b] 等距 n 个点含端点❌ 离散散点、离散参数grafar.range[a, b] 等距 n 个点含端点✅ 相连连续曲线、曲面grafar.logseq[a, b] 对数分布 n 个点✅ 相连起点处波动密集的函数grafar.ints[a, b] 之间的全部整数❌ 离散刻度、离散档位生成器逐一拆解如何选对数据源1. grafar.set把任意数组变成集合const set grafar.set([-1, 0, 1]).select();set是最基础的生成器把普通 JS 数组包装成 Grafar 变量。注意两点元素不要求唯一set([0, 0, 0])就是 3 个 0数组会被浅拷贝之后修改原数组不会影响已绘制的图形。2. grafar.seq等间距的离散序列const seq grafar.seq(-1, 1, 20).select(); // 20 个等距点含端点seq(a, b, n)在 a 与 b 之间生成 n 个等距点但点与点之间不连线效果是一串散点。它很适合做离散参数配合map使用时每个点都能各生成一条曲线。3. grafar.range模拟连续区间 [a, b]const range grafar.range(-1, 1, 20).select();range和seq的区别只有一个点会按顺序连线从而模拟出连续区间[a, b]的拓扑。画连续函数曲线时这是最常用的数据源。4. grafar.logseq靠近起点更密的对数序列const logseq grafar.logseq(0, 10, 100).select();logseq按对数规律分布点数越靠近 a 点越密集往 b 方向逐渐变疏。当你绘制的函数在起点附近变化快、波动多例如 1/x 型或衰减震荡函数用logseq能避免细节被均匀采样漏掉。5. grafar.ints只取整数的离散维度const ints grafar.ints(-2, 2.5).select(); // 得到 [-2, -1, 0, 1, 2]ints(a, b)返回 a 到 b 之间的所有整数含端点非整数端点会自动取整。适合表达离散的档位例如动画从第 1 帧到第 10 帧。进阶技巧让 5 个生成器组合出更丰富的图形 常量也是生成器直接传数字9等价于grafar.set([9]).select()所以pin([x, 2], pan)这样的写法完全合法。两个 range 拼出曲面把两个range一起传给grafar.map自动得到 2D 参数曲面换成一个range 一个seq则得到一组曲线每条对应seq中的一个点。隐式曲线交给 vsolvegrafar.vsolve(f, size, dof)用牛顿法求函数零点能直接画出x² y² 2这类隐式定义的曲线一个 2D 隐式圆的效果。响应式更新更新自由变量的值后所有依赖它的变量和面板会自动重算刷新这是 Grafar 动画的底层机制。延伸阅读相关源码与文档路径 5 个内置生成器 vsolve 的实现src/generators.ts生成器基类select/intosrc/core/Generator.ts官方教程·生成器篇docs/tutorial/2-generators.md官方教程·映射与拓扑篇docs/tutorial/3-mapping.md完整 API 文档docs/api.md掌握了set、seq、range、logseq、ints这 5 个内置生成器你就拿到了 Grafar 数据可视化的第一块积木先用生成器定义集合、序列或区间再用map做数学变换最后pin到面板上图形即刻呈现。【免费下载链接】grafarReactive multidimensional math data visualization for the web.项目地址: https://gitcode.com/gh_mirrors/gr/grafar创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考