AI 技能AI 插件【免费下载链接】agentic-awesome-skillsAAS Core is the local, agent-first control plane for complete catalog discovery, agent-owned selection, stack validation, and planning, backed by 2,445 agentic skills. Includes CLI, local MCP, catalog, plugins, and Workbench.项目地址https://gitcode.com/gh_mirrors/an/agentic-awesome-skills点击查看免费下载本篇指南以 AAS 仓库中claude-d3js-skill技能包的核心参考文档 scale-reference.md 为骨架系统梳理 D3.js 全部比例尺类型连续、顺序色阶、序数、工具函数、颜色插值完整保留可运行示例、方法参数与适用场景并结合同目录下的 detailed-guide.md、colour-schemes.md 以及assets/下的真实模板说明比例尺如何在条形图、散点图、热力图、气泡图等图表中落地。读完你将能根据数据形态定量、时间、分类、偏斜分布、多数量级正确选择比例尺并掌握domain→range映射、invert反算、nice圆整、刻度生成与颜色插值等核心能力。一、比例尺的本质从数据空间到像素空间的桥梁比例尺Scale是 D3.js 中最核心的抽象之一它负责把一种数据值域domain即输入数据区间映射为另一种值域range即输出区间通常是像素坐标或颜色。视觉编码中的位置、条长、半径、颜色几乎都经由比例尺产出因此选择正确的比例尺直接决定了图表的可读性与数据呈现的准确性。在 SKILL.md 定义的claude-d3js-skill技能中创建 sophisticated, interactive data visualisations 的标准工作流见 detailed-guide.md将创建比例尺列为绘制函数的第三步紧跟在尺寸定义与主分组创建之后const xScale d3.scaleLinear() .domain([0, d3.max(data, d d.x)]) .range([0, innerWidth]); const yScale d3.scaleLinear() .domain([0, d3.max(data, d d.y)]) .range([innerHeight, 0]); // Note: inverted for SVG coordinates这里有一个新手极易踩坑的细节SVG 坐标系中 y 轴向下增长所以 y 比例尺的range必须写成[innerHeight, 0]倒置数据越大渲染位置越靠上。这条规则在后续所有定量比例尺 坐标轴的组合中都适用。二、连续比例尺Continuous Scales连续比例尺将连续的输入区间映射为连续或离散分桶的输出用于定量数据的位置、长度、半径编码。2.1 Linear 线性比例尺线性比例尺以线性插值把连续输入域映射到连续输出区间是最常用的比例尺const scale d3.scaleLinear() .domain([0, 100]) .range([0, 500]); scale(50); // Returns 250 scale(0); // Returns 0 scale(100); // Returns 500 // Invert scale (get input from output) scale.invert(250); // Returns 50适用场景大多数定量数据温度、价格、计数、测量值的默认选择坐标轴、条形长度、位置编码常用方法方法作用.domain([min, max])设置输入域.range([min, max])设置输出区间.invert(value)由输出值反算输入域值用于鼠标坐标 → 数据值.clamp(true)将输出限制在 range 边界内.nice()将 domain 扩展到整洁的整数边界其中.nice()在真实模板中已被实际使用——chart-template.jsx 中 y 轴比例尺即写成.range([innerHeight, 0]).nice()让纵轴刻度落在 0、50、100 这类整齐数值上而非 0.201 之类的小数。2.2 Power 幂比例尺幂比例尺以指数变换映射输入与输出适合人类感知呈非线性的数据const sqrtScale d3.scalePow() .exponent(0.5) // Square root .domain([0, 100]) .range([0, 500]); const squareScale d3.scalePow() .exponent(2) // Square .domain([0, 100]) .range([0, 500]); // Shorthand for square root const sqrtScale2 d3.scaleSqrt() .domain([0, 100]) .range([0, 500]);适用场景感知比例缩放人的视觉对亮度和面积感知是非线性的面积编码用平方根比例尺把数值映射为圆半径圆的面积才与数值成正比强调小值或大值之间的差异d3.scaleSqrt()是exponent(0.5)的简写在气泡图等半径编码场景中几乎成了标准配置。仓库中的 interactive-template.jsx 与 d3-patterns.md 的 Bubble chart 示例均使用d3.scaleSqrt()作为sizeScale。2.3 Logarithmic 对数比例尺对数比例尺以对数变换映射输入适合跨越多个数量级的数据const logScale d3.scaleLog() .domain([1, 1000]) // Must be positive .range([0, 500]); logScale(1); // Returns 0 logScale(10); // Returns ~167 logScale(100); // Returns ~333 logScale(1000); // Returns 500适用场景数据跨越多个数量级人口、GDP、财富分布对数坐标轴指数增长可视化重要约束domain 值必须严格为正0传入 0 或负数会导致NaN。如果需要处理含负值或跨越 0 的宽动态范围数据可考虑 D3 的scaleSymlog对称对数变体见 colour-schemes.md 中的动态选色示例。2.4 Time 时间比例尺时间比例尺是面向时间数据的专用线性比例尺domain 使用Date对象const timeScale d3.scaleTime() .domain([new Date(2020, 0, 1), new Date(2024, 0, 1)]) .range([0, 800]); timeScale(new Date(2022, 0, 1)); // Returns 400 // Invert to get date timeScale.invert(400); // Returns Date object for mid-2022适用场景时间序列可视化时间线坐标轴时间驱动动画基于日期的交互如 brush 选区 → 日期范围方法.nice()—— 扩展到整洁的时间间隔边界.ticks(count)—— 生成间距美观的刻度值其余所有线性比例尺方法同样适用仓库的 sample-data.json 提供了timeSeries数据{date: 2024-01-01, value: 120, ...}配合d3.timeParse(%Y-%m-%d)解析日期后即可直接喂给scaleTimed3-patterns.md 的 Area chart 示例展示了标准用法d3.scaleTime().domain(d3.extent(data, d d.date)).range([0, innerWidth])。2.5 Quantize 量化比例尺量化比例尺把连续输入映射为离散输出桶输出个数 range 元素个数const quantizeScale d3.scaleQuantize() .domain([0, 100]) .range([low, medium, high]); quantizeScale(25); // Returns low quantizeScale(50); // Returns medium quantizeScale(75); // Returns high // Get the threshold values quantizeScale.thresholds(); // Returns [33.33, 66.67]适用场景连续数据分箱binning热力图颜色分级风险等级低/中/高年龄段、收入档位2.6 Quantile 分位数比例尺分位数比例尺按样本数据的分位数位置把连续输入映射为离散输出保证每个输出桶中的数据量尽量相等const quantileScale d3.scaleQuantile() .domain([3, 6, 7, 8, 8, 10, 13, 15, 16, 20, 24]) // Sample data .range([low, medium, high]); quantileScale(8); // Returns based on quantile position quantileScale.quantiles(); // Returns quantile thresholds适用场景无论分布形态如何都生成等量分组的分类基于百分位数的分级如成绩排名、绩效分档处理偏斜分布skewed distributions与scaleQuantize的关键区别Quantize 按数值等分 domainQuantile 按数据点数量等分因此对偏斜数据更稳健。2.7 Threshold 阈值比例尺阈值比例尺用自定义阈值把连续输入切分为离散输出阈值数组有 n 个值时 range 应有 n1 个元素const thresholdScale d3.scaleThreshold() .domain([0, 10, 20]) .range([freezing, cold, warm, hot]); thresholdScale(-5); // Returns freezing thresholdScale(5); // Returns cold thresholdScale(15); // Returns warm thresholdScale(25); // Returns hot适用场景自定义断点成绩等级边界A、B、C、D、F温度类别结冰/寒冷/温暖/炎热空气质量指数分级三、顺序与发散颜色比例尺Sequential Diverging Scales颜色比例尺把连续数值映射为颜色渐变是热力图、分级统计图choropleth与连续数据的标准编码方式。3.1 Sequential 顺序颜色比例尺顺序颜色比例尺把连续输入映射为连续颜色渐变只需提供插值器无需rangeconst colourScale d3.scaleSequential(d3.interpolateBlues) .domain([0, 100]); colourScale(0); // Returns lightest blue colourScale(50); // Returns mid blue colourScale(100); // Returns darkest blue可用插值器interpolators单色相Single hued3.interpolateBlues、d3.interpolateGreens、d3.interpolateRedsd3.interpolateOranges、d3.interpolatePurples、d3.interpolateGreys多色相Multi-hued3.interpolateViridis、d3.interpolateInferno、d3.interpolateMagmad3.interpolatePlasma、d3.interpolateWarm、d3.interpolateCoold3.interpolateCubehelixDefault、d3.interpolateTurbo适用场景热力图、分级统计图choropleth maps连续数据可视化温度、海拔、密度等单指标数据关于各插值器的感知均匀性、色盲友好性与推荐优先级colour-schemes.md 有专门章节其中明确推荐d3.interpolateViridis作为科学可视化的首选感知均匀、色盲友好、可打印、无视觉死区并给出了离散版方案d3.schemeBlues[9]等写法。3.2 Diverging 发散颜色比例尺发散颜色比例尺把连续输入映射为带中点的发散渐变domain 使用三元素[min, midpoint, max]const divergingScale d3.scaleDiverging(d3.interpolateRdBu) .domain([-10, 0, 10]); divergingScale(-10); // Returns red divergingScale(0); // Returns white/neutral divergingScale(10); // Returns blue可用插值器插值器渐变方向d3.interpolateRdBu红 → 蓝d3.interpolateRdYlBu红 → 黄 → 蓝d3.interpolateRdYlGn红 → 黄 → 绿d3.interpolatePiYG粉 → 黄 → 绿d3.interpolateBrBG棕 → 蓝绿d3.interpolatePRGn紫 → 绿d3.interpolatePuOr紫 → 橙d3.interpolateRdGy红 → 灰d3.interpolateSpectral全光谱彩虹适用场景存在语义中点的数据零点、平均值、中性值正/负值对比盈利/亏损、高于/低于平均相关性矩阵3.3 SequentialQuantile 顺序分位数比例尺顺序分位数比例尺把分位数映射与顺序颜色结合传入的是样本数据而非阈值颜色按分位数位置分配const sequentialQuantileScale d3.scaleSequentialQuantile(d3.interpolateBlues) .domain([3, 6, 7, 8, 8, 10, 13, 15, 16, 20, 24]); // Maps based on quantile position适用场景感知均匀的分箱着色处理离群点outliers偏斜分布的数据四、序数比例尺Ordinal Scales序数比例尺把离散分类输入映射为连续位置或离散输出是条形图、分类轴与分类着色的基础。4.1 Band 带状比例尺带状比例尺把离散输入映射为连续的带矩形可配置内/外留白是最常用的图表比例尺之一const bandScale d3.scaleBand() .domain([A, B, C, D]) .range([0, 400]) .padding(0.1); bandScale(A); // Returns start position (e.g., 0) bandScale(B); // Returns start position (e.g., 110) bandScale.bandwidth(); // Returns width of each band (e.g., 95) bandScale.step(); // Returns total step including padding bandScale.paddingInner(); // Returns inner padding (between bands) bandScale.paddingOuter(); // Returns outer padding (at edges)适用场景条形图最常见的用途分组元素分类坐标轴热力图单元格留白padding选项方法作用.padding(value)同时设置内、外留白取值 0–1.paddingInner(value)带与带之间的留白0–1.paddingOuter(value)两端边缘的留白0–1.align(value)带的对齐位置0–1默认 0.5 居中仓库证据基础图表模板 chart-template.jsx 的 x 轴即d3.scaleBand().domain(data.map(d d.label)).range([0, innerWidth]).padding(0.1)并以xScale.bandwidth()作为矩形宽度分组柱状图则采用双层 band外层x0Scale分组、内层x1Scale的 range 设为[0, x0Scale.bandwidth()]见 d3-patterns.md 的 Grouped bar chart 示例。4.2 Point 点比例尺点比例尺把离散输入映射为等距的点位置本身无宽度const pointScale d3.scalePoint() .domain([A, B, C, D]) .range([0, 400]) .padding(0.5); pointScale(A); // Returns position (e.g., 50) pointScale(B); // Returns position (e.g., 150) pointScale(C); // Returns position (e.g., 250) pointScale(D); // Returns position (e.g., 350) pointScale.step(); // Returns distance between points适用场景折线图的分类 x 轴带分类轴的散点图网络图中节点的分类定位任意需要按分类取点的场景4.3 Ordinal 序数颜色比例尺序数比例尺把离散输入映射为离散输出颜色、形状等同一输入永远得到同一输出保证跨图表的一致性const colourScale d3.scaleOrdinal(d3.schemeCategory10); colourScale(apples); // Returns first colour colourScale(oranges); // Returns second colour colourScale(apples); // Returns same first colour (consistent) // Custom range const customScale d3.scaleOrdinal() .domain([cat1, cat2, cat3]) .range([#FF6B6B, #4ECDC4, #45B7D1]);内置分类颜色方案方案颜色数d3.schemeCategory1010 色d3.schemeAccent8 色d3.schemeDark28 色d3.schemePaired12 色配对明暗d3.schemePastel19 色d3.schemePastel28 色d3.schemeSet19 色d3.schemeSet28 色d3.schemeSet312 色d3.schemeTableau1010 色适用场景分类着色图例项多序列图表网络图节点类型关于每个方案的饱和度、亮度与适合场景如 Dark2 适合暗色背景、Paired 适合嵌套分类、Tableau10 适合商业仪表盘可查阅 colour-schemes.md 的详细对比。若需色盲安全分类调色板该文档还给出了 Okabe-Ito 八色方案#E69F00、#56B4E9、#009E73、#F0E442、#0072B2、#D55E00、#CC79A7、#000000。interactive-template.jsx 中散点分类着色正是d3.scaleOrdinal(d3.schemeCategory10)。五、比例尺实用工具Scale Utilities5.1 Nice圆整定义域.nice()把 domain 扩展为整洁的舍入边界可传入近似刻度数const scale d3.scaleLinear() .domain([0.201, 0.996]) .nice(); scale.domain(); // Returns [0.2, 1.0] // With count (approximate tick count) const scale2 d3.scaleLinear() .domain([0.201, 0.996]) .nice(5);时间比例尺的.nice()则会把边界圆整到天/周/月等时间单位上。5.2 Clamp限制输出范围.clamp(true)将输出值限制在 range 边界内超出 domain 的输入不再产生越界输出const scale d3.scaleLinear() .domain([0, 100]) .range([0, 500]) .clamp(true); scale(-10); // Returns 0 (clamped) scale(150); // Returns 500 (clamped)5.3 Copy创建独立副本.copy()返回互不影响的独立副本适合在同源数据上派生不同编码const scale1 d3.scaleLinear() .domain([0, 100]) .range([0, 500]); const scale2 scale1.copy(); // scale2 is independent of scale15.4 刻度生成Ticks TickFormat刻度生成是坐标轴的核心输入.ticks()生成近似数量的整洁刻度值.tickFormat()返回刻度格式化函数const scale d3.scaleLinear() .domain([0, 100]) .range([0, 500]); scale.ticks(10); // Generate ~10 ticks scale.tickFormat(10); // Get format function for ticks scale.tickFormat(10, .2f); // Custom format (2 decimal places) // Time scale ticks const timeScale d3.scaleTime() .domain([new Date(2020, 0, 1), new Date(2024, 0, 1)]); timeScale.ticks(d3.timeYear); // Yearly ticks timeScale.ticks(d3.timeMonth, 3); // Every 3 months timeScale.tickFormat(5, %Y-%m); // Format as year-month注意两点ticks(10)中的数字只是近似数量D3 会挑选间隔整洁的值时间刻度的ticks可以直接传入时间间隔d3.timeYear、d3.timeMonth、d3.timeDay等或间隔 步长组合。在 detailed-guide.md 的网格线技巧中还展示了用d3.axisLeft(yScale).tickSize(-innerWidth).tickFormat()把刻度线拉成网格线的做法。六、颜色空间与插值Colour Spaces and Interpolation线性比例尺的 range 支持颜色字符串默认使用RGB 插值通过.interpolate()可以切换颜色空间得到不同的中间过渡效果// RGB interpolation (default) const scale d3.scaleLinear() .domain([0, 100]) .range([blue, red]); // Default: RGB interpolation// HSL interpolation const scale d3.scaleLinear() .domain([0, 100]) .range([blue, red]) .interpolate(d3.interpolateHsl); // Smoother colour transitions// Lab interpolation const scale d3.scaleLinear() .domain([0, 100]) .range([blue, red]) .interpolate(d3.interpolateLab); // Perceptually uniform// HCL interpolation const scale d3.scaleLinear() .domain([0, 100]) .range([blue, red]) .interpolate(d3.interpolateHcl); // Perceptually uniform with hue选型要点RGB 是默认值但中间色会发灰经过灰色区域HSL 过渡更平滑但感知不均匀Lab 与 HCL 都追求感知均匀其中 HCL 额外保持色相连续适合需要明确中间偏哪个色相的场景。colour-schemes.md 在自定义调色板部分同样推荐d3.interpolateLab来构建感知均匀的自定义连续/发散渐变。七、常见组合模式Common Patterns7.1 自定义中点的发散比例尺用三元素 domain 双色 range Lab/HCL 插值实现低值 → 中性 → 高值的经典发散配色const scale d3.scaleLinear() .domain([min, midpoint, max]) .range([red, white, blue]) .interpolate(d3.interpolateHcl);7.2 多段渐变比例尺range 中放多个颜色断点即得多段渐变domain 元素数与 range 颜色数一一对应const scale d3.scaleLinear() .domain([0, 25, 50, 75, 100]) .range([#d53e4f, #fc8d59, #fee08b, #e6f598, #66c2a5]);7.3 圆的感知半径比例尺用scaleSqrt把数值映射为圆半径保证面积而非半径与数值成正比const radiusScale d3.scaleSqrt() .domain([0, d3.max(data, d d.value)]) .range([0, 50]); // Use with circles circle.attr(r, d radiusScale(d.value));这一模式在仓库的 Bubble chartd3-patterns.md与交互式模板 interactive-template.jsx 中均被直接采用range([3, 20])控制最小/最大半径。7.4 基于数据范围的自适应比例尺根据数据跨度动态选择比例尺类型——跨度超过两个数量级时用对数否则用线性function createAdaptiveScale(data) { const extent d3.extent(data); const range extent[1] - extent[0]; // Use log scale if data spans 2 orders of magnitude if (extent[1] / extent[0] 100) { return d3.scaleLog() .domain(extent) .range([0, width]); } // Otherwise use linear return d3.scaleLinear() .domain(extent) .range([0, width]); }注意此处的extent[1] / extent[0] 100判断隐含了数据全为正的前提对数 domain 要求严格为正实际使用时应先过滤非正数据。7.5 显式分类的颜色比例尺与 unknown 兜底用.unknown()为未在 domain 中的输入提供统一兜底色避免意外值得到任意颜色const colourScale d3.scaleOrdinal() .domain([Low Risk, Medium Risk, High Risk]) .range([#2ecc71, #f39c12, #e74c3c]) .unknown(#95a5a6); // Fallback for unknown valuesunknown同样适用于 band、point、quantize、threshold 等比例尺是数据中出现脏值时的稳健保障。八、比例尺选型速查表数据形态推荐比例尺典型用途连续定量、均匀分布scaleLinear坐标轴、条长、位置感知非线性 / 面积编码scaleSqrt/scalePow圆半径、气泡图跨度多个数量级、全正scaleLog人口、GDP、财富分布时间日期scaleTime时间序列、时间轴连续 → 少数离散档scaleQuantize热力分级、风险等级按样本量均分的分级scaleQuantile偏斜数据、百分位分档自定义断点分级scaleThreshold成绩、温度、AQI连续 → 颜色渐变scaleSequential热力图、choropleth带中点的正负对比scaleDiverging盈利/亏损、相关性分类 → 带宽度scaleBand条形图、分组元素分类 → 点位置scalePoint折线分类轴、网络节点分类 → 颜色/形状scaleOrdinal分类着色、图例九、在 claude-d3js-skill 中的落地路径比例尺并非孤立概念它与图表模式、配色、模板是配套使用的。以本文为起点可以按以下顺序深入claude-d3js-skill技能包的其余资源SKILL.md—— 技能边界与适用条件何时用 D3、何时改用 Three.js 等。detailed-guide.md—— 完整工作流集成模式、绘制函数结构、响应式布局、交互与过渡本文提到的xScale/yScale即出自其标准绘制流程。d3-patterns.md—— 各图表类型的完整代码树图/矩形式树图/旭日图用scaleOrdinal热力图用scaleBandscaleSequential气泡图用scaleSqrt分级统计图用scaleSequential分组/堆叠柱状图用双层 band 等。colour-schemes.md—— 颜色方案的完整选型与色盲可访问性指导。chart-template.jsx—— 基础图表模板可直接运行验证scaleBandscaleLinear.nice()的组合。interactive-template.jsx—— 交互式模板验证scaleSqrt半径编码、scaleOrdinal分类着色、d3.zoom与 tooltip 的整合。sample-data.json—— 内置测试数据timeSeries时间序列、categorical分类条形、scatterData散点/气泡、hierarchical层级、network网络、stackedData堆叠、geographicPoints地理点、divergingData正负发散——覆盖了本文所有比例尺类型的练习场景。最后提醒两点使用准则一是比例尺的domain应尽量由数据驱动d3.max、d3.extent动态计算避免硬编码导致数据变化后图形溢出二是颜色编码要遵循 colour-schemes.md 的可访问性建议避免红绿组合、补充图案/文字等冗余编码、控制分类数量在 5–8 个以内让比例尺映射出的图形既准确又对更多读者友好。赞分享AI 技能AI 插件【免费下载链接】agentic-awesome-skillsAAS Core is the local, agent-first control plane for complete catalog discovery, agent-owned selection, stack validation, and planning, backed by 2,445 agentic skills. Includes CLI, local MCP, catalog, plugins, and Workbench.项目地址https://gitcode.com/gh_mirrors/an/agentic-awesome-skills点击查看免费下载相关推荐OpenMontage D3.js 比例尺Scale全参考从连续映射到颜色编码的完整实战指南OpenMontage D3.js 比例尺Scale全参考从连续映射到颜色编码的完整实战指南 本篇指南以 OpenMontage 仓库中 d3 viz 技人工智能AI Agent音视频媒体生成工作流自动化d3 scaleSequential 详解连续顺序比例尺的构造、变体与色标映射实战d3 scaleSequential 详解连续顺序比例尺的构造、变体与色标映射实战 本篇基于 d3 官方文档 docs/d3 scale/sequential前端数据可视化图表库OpenMontage 中 D3.js Scale 尺度系统全解从连续、序数到色标尺度的选型与实践指南OpenMontage 中 D3.js Scale 尺度系统全解从连续、序数到色标尺度的选型与实践指南 导读 在数据可视化开发中Scale尺度是连接数人工智能AI Agent音视频媒体生成工作流自动化创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考