C2 scale体系完整教程一次掌握linear、log、power三种标度的可逆实现【免费下载链接】c2Declarative data visualization in Clojure(Script).项目地址: https://gitcode.com/gh_mirrors/c22/c2C2是一个受 D3 启发的 Clojure/ClojureScript 声明式数据可视化库其scale标度体系负责把原始数据映射到像素坐标。本教程带你拆解linear线性、log对数、power幂三种标度的实现细节以及invert逆变换如何让你从坐标反查原始数据——这是构建交互式图表悬停提示、刷选的基础能力。如果你刚接触 C2先获取代码git clone https://gitcode.com/gh_mirrors/c22/c2为什么数据可视化离不开标度在图表中销售额 100 万要变成柱状图里 300 像素的高度这个数据 → 视觉通道的转换就由标度完成。C2 的标度有两个关键特性特性说明可调用标度本身实现clojure.lang.IFn像函数一样使用(s 50) 300可配置通过关键字参数传入:domain定义域与:range值域可逆变换linear实现IInvertable协议可交换域与值域得到逆标度核心源码集中在一个文件src/cljx/c2/scale.cljx通过 cljx 自动生成.clj与.cljs双平台版本配合数学函数库src/cljx/c2/maths.cljx。linear 线性标度最快上手的起点linear是最基础的标度默认:domain与:range都是[0 1]。本质就是一条线性插值公式(def s (scale/linear :domain [0 100] :range [0 600])) (s 50) ;; 300它的构造由c2-obj宏定义于src/clj/c2/util.clj完成——这个宏同时生成一个 record 和一个接受关键字参数的构造函数默认值写在调用点之前因此(linear)直接可用(linear :range [0 600])也能局部覆盖。官方测试test/c2/t_scale.clj验证了它的默认值与插值行为。log 对数标度把数量级差距压进一个小区间当数据跨越几个数量级收入、人口、文件大小线性标度会让小值挤成一团。log标度默认:domain [1 10]、:range [0 1]原理是先取自然对数、再走 linear(def s (log)) (s 1) ;; 0 (s 10) ;; 1 (s 100) ;; 2线性外推超出 1 也成立⚠️ 注意log的定义域不能包含 0 或负数选 domain 时请先确认数据的下限。power 幂标度指数映射的非线性放大器power默认同样是[0 1] → [0 1]但内部实现与名字略有出入它对输入先做指数变换exp(x)再交给 linear 在[exp(d0), exp(d1)]上插值见scale.cljx中comp的组合方式。(def s (power :domain [0 10] :range [0 10])) (s 5) ;; 0.0669...exp(5)148.4 在 [1, 22026] 中的相对位置这种先 exp 后线性的结构让中间值被强烈压缩、两端被拉伸适合表达增长型、长尾型数据。可逆设计从像素反查原始数据三种标度共享同一套可逆结构。scale.cljx顶部定义了协议(defprotocol IInvertable (invert [scale] Inverted scale))linear的实现非常巧妙——逆变换就是交换 domain 与 range(def s (scale/linear :domain [0 100] :range [0 600])) ((invert s) 300) ;; 50log与power都构建在linear之上先变换定义域再委托给 linear因此它们天然继承同一条可逆链路。典型应用️ 鼠标悬停时由像素位置反算出数据值显示 tooltip️ 刷选brushing时把选择框坐标还原为数据区间test/c2/t_scale.clj中的 Inverted linear scale 用例就是这一机制的回归测试。实战在条形图中使用 linear项目自带的 bars 示例vrepl/resources/samples/bars.clj展示了标度最典型用法——用linear把数值映射为条形宽度(s (scale/linear :domain [0 (apply max (vals data))] :range [0 width])) ;; 每根条形的宽度再配合c2.core/unify遍历数据、生成 Hiccup 风格的 DOM 描述即可得到完整的声明式图表。常见问题与选型速查场景推荐标度关键点普通区间数值 → 位置/长度linear需要逆变换时首选invert开箱即用跨数量级的数据0.1 ~ 10⁶log定义域下限必须 0指数增长、长尾分布power内部为 exp 映射压缩中间值新手小贴士修改src/cljx/下的.cljx文件后运行lein cljx重新生成双平台代码。依赖接入在project.clj中加入[com.keminglabs/c2 0.2.3]。标度是纯数据变换不依赖 DOM——你可以在服务端、测试里直接调用并断言结果这也是 C2 视图即数据 理念的体现。深入阅读的模块路径标度核心实现src/cljx/c2/scale.cljx数学函数log、expt 等src/cljx/c2/maths.cljxc2-obj宏定义src/clj/c2/util.clj标度单元测试test/c2/t_scale.clj图表示例bars、choropleth、sunburstvrepl/resources/samples/掌握 linear、log、power 三种标度的构造与逆变换后你已经具备用 C2 构建交互式可视化图表的完整数据映射能力。【免费下载链接】c2Declarative data visualization in Clojure(Script).项目地址: https://gitcode.com/gh_mirrors/c22/c2创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考