D3.js是实现平行坐标图最靠谱的选择，因其支持坐标映射、路径绘制和交互响应，且可定制轴顺序、高亮连线、过滤维度；其他库原生不支持或中文/离散维度支持弱。
用 D3.js 实现平行坐标图最靠谱
纯 HTML + CSS 做不了平行坐标图——它本质是动态多维数据可视化，需要坐标映射、路径绘制和交互响应。浏览器原生不支持这种图表类型，必须借助 JavaScript 可视化库。D3.js 是目前最成熟、可控性最强的选择，尤其适合定制轴顺序、高亮连线、过滤维度等需求。
其他方案如 Chart.js、ECharts 都不原生支持平行坐标图；Plotly 虽有 parcoords，但对中文轴标签、自定义缩放、离散维度的支持较弱，且打包体积大、调试困难。
- 推荐使用 D3 v7+（模块化导入更轻量）
- 数据需为数组形式，每项是对象，键名即维度名，例如：
[{age: 32, income: 85000, city: "Beijing"}, ...] - 离散值（如字符串类别）需手动映射为数值区间，否则
d3.scalePoint或d3.scaleBand会报错或渲染错位 - 避免把时间字段直接传给
d3.scaleTime后未 parse——常见错误是传入字符串"2023-01"却没用d3.timeParse转换
关键三步：画轴、映射点、连折线
平行坐标图逻辑清晰：先画垂直轴（每个维度一列），再把每条记录的各维度值投影到对应轴上，最后用 d3.line 连成折线。难点在「映射」——同一数据在不同轴上的位置计算方式不同。
- 连续型维度（数值、日期）用
d3.scaleLinear或d3.scaleTime，注意设置.domain([min, max])时要遍历全量数据预计算，不能只取首条 - 离散型维度（城市、分类）用
d3.scalePoint，.range([top, bottom])必须显式指定，否则默认从 0 开始导致所有点挤在顶部 - 画连线时，
d3.line().x(d => xScale(d.dimension)).y(d => yScale(d.value))这类写法是错的——平行坐标要求每条线在每个轴上有唯一x（固定）、可变y，所以应构造中间数组：dimensions.map(d => ({x: xScale(d), y: yScale(data[d])}))
鼠标悬停高亮某条线时，别忘了重绘其余线的透明度
单纯改 stroke-opacity 不够：D3 默认复用 <path></path> 元素，若用 .attr("opacity", 0.1) 批量设，再单独设某条为 1，下次更新数据时容易残留旧状态。正确做法是绑定数据后，在 .attr("stroke-opacity", d => d === hoveredLine ? 1 : 0.2) 中动态计算。
从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。
立即学习“前端免费学习笔记（深入）”；
- hover 事件监听要加在
<path></path>上，不是整个<svg></svg>，否则移动过快会触发多次、卡顿 - 如果数据量 > 500 条，建议加
debounce（比如 Lodash 的_.debounce）防抖，不然频繁重绘拖慢页面 - 高亮时同步在对应轴上加小圆点（
<circle></circle>）标出该线在各维度的取值，比仅改线宽更直观
导出为 PNG 时 Canvas 渲染文字常模糊或缺失中文
D3 生成的是 SVG，转 PNG 需通过 canvg 或 html2canvas 渲染到 canvas。但后者对 <text></text> 标签中文字体、字号、换行支持差，尤其中文容易变成方块或偏移。
- 优先用
canvg@3.x（支持 SVG → Canvas），并确保加载了中文字体：在 SVG 内嵌<style> text { font-family: "Microsoft YaHei", sans-serif; } </style> - 避免用
transform: rotate()旋转轴标签——canvg对 transform 解析不稳定，改用text-anchor和dy微调位置 - 导出前临时把所有
<g class="axis"></g>的font-size设为绝对值（如12px），防止相对单位（em）在 canvas 中失效
平行坐标图真正的复杂点不在画图，而在数据预处理与维度语义对齐——比如“满意度：1~5 分”和“响应时长：毫秒级”混在一起时，归一化策略选 min-max 还是 z-score，直接影响连线聚类效果。这点容易被示例代码忽略。
