企业官网建设流程全解析

简介：LoremIpsumDashboard 是基于 Banana 框架、整合 d3.js 的交互式数据可视化仪表板，定位为学习型开源项目，适合前端开发者、数据分析师和可视化爱好者。压缩包共 44 个文件、约 2.72MB，以 17 个 JavaScript 源码为核心，配合 7 个 HTML 页面、5 个 JSON 数据文件、3 个 Java 辅助处理类、CSS 样式表与说明文档，目录结构清晰，便于按模块查阅。项目覆盖柱状图、地图位置、斜率图、动态图表等多类可视化案例，涉及 d3.js 数据绑定、地理投影、交互更新等关键技术，并附有数据处理脚本与 PDF 文档，可边读源码边运行调试。已有 105 人学习，适合掌握 d3.js 绘图逻辑、了解完整数据仪表板工程结构，或作为自定义可视化项目的开发起点。

1. LoremIpsumDashboard：用 d3 把 Banana 数据变成可交互仪表板的轻量方案

仪表板需求往往开头简单，越做越难：几个折线加柱状很快搭完，等业务方要悬浮联动、钻取明细、刷新动画时，通用图表库的配置项就成了硬伤。LoremIpsumDashboard 是以 Banana 为代号的轻量仪表板项目，核心思路是用 d3 直接从数据驱动 SVG 元素，把香蕉供应链的库存、价格、在途量渲染成交互视图。

这个项目能解决的问题很实际：摆脱图表库配置项的黑匣子，拿回图形每一像素的控制权。适合手里有数据、想自定义交互的前端工程师，也适合要评估可视化方案的技术负责人。

全文按选型逻辑、核心图形、落地步骤、避坑、进阶五段推进，命令和代码都能直接抄。

2. 为什么是 d3 而不是现成图表库：Banana 仪表板的选型逻辑

2.1 现成图表库做不到的 20% 定制需求

先给结论：Banana 仪表板选 d3 不是因为通用图表库不好，而是因为"定制自由度"这件事没法靠配置项补齐。通用图表库的思路是把常见图表封装成黑盒子，暴露 option 对象。折线图、柱状图、饼图这种高频图形确实开箱即用，但一旦遇到"点击某个仓库的柱子，其他三张图同时过滤"这种跨图联动，或者"图例要加迷你趋势线"这种混合形态，配置项就会膨胀成维护噩梦。

d3 的思路完全反过来。它不提供图表，只提供数据到图形元素的映射工具：scale、shape、layout、transition。你告诉它数据长什么样、坐标轴怎么算、SVG 元素怎么画，它负责把数据和图形一一绑死。这意味着你画的每一条 path、每一个 rect 都是自己可控的 DOM 节点，改起来没有任何中间层。

我一般这样判断选型：需求里超过 20% 的交互需要自定义，就选 d3；如果只是内部后台展示几个标准图表，图表库反而效率更高。Banana 仪表板的核心诉求是"库存预警 + 价格走势 + 在途量占比"三块数据要互相联动，自定义交互占比明显偏高，所以 d3 是更合理的起点。

2.2 数据到图形的映射：d3 的核心心智模型

d3 最难适应的一点是它的数据绑定模型，但这个模型恰恰是它强大的根源。传统写法是先创建元素再填数据，d3 的逻辑是先声明数据再让元素跟随数据。核心 API 是 data().join()，它会把数据数组和现有 DOM 节点做匹配，多的数据创建新元素，少的销毁旧元素，对应关系靠第二个参数传入的 key 函数控制。

const circles = svg.selectAll('circle') .data(bananaData, d => d.id) // 第二个参数是关键函数 .join('circle'); // enter + update + exit 一体写法

上面这行代码是所有 d3 仪表板的地基。data() 接收数据数组和 key 函数，join('circle') 是 v7 版本之后推荐的写法，替代了老版本里 enter().append() 加 exit().remove() 的繁琐流程。key 函数告诉 d3 用哪个字段判断"同一个数据"，没有它 d3 会按下标匹配，数据顺序一变图形就乱。

这套模型的落地价值在于：当 Banana 仪表板需要定时刷新库存数据时，不需要清空重画整个 SVG，只需要重新调用 data().join()，d3 会自动做最小差异更新。后面的避坑章节我会专门讲 key 函数写错的现场，这里先记住它是整个绑定逻辑的锚点。血泪经验是：所有数据更新异常，先查 key 函数，八成问题都出在这。

2.3 最小工程结构：一个能跑起来的起点

搭建 LoremIpsumDashboard 的最小工程只需要三个文件：一个 HTML 页面、一个数据模块、一个 d3 引入。d3 官方提供了 ES module 版本，可以在浏览器里直接 import，也可以用 npm 包在构建工具里引用。我习惯用 Vite 起本地开发服务，因为 d3 需要读取外部数据文件，直接双击打开 HTML 会触发跨域限制。

mkdir banana-dashboard cd banana-dashboard npm init -y npm install d3 vite

安装完成后的项目结构是这样：index.html 放页面骨架和容器 div，main.js 里写 d3 初始化逻辑，data/ 目录放 CSV 或 JSON 数据文件。启动命令 npx vite 会在本地起一个开发服务器，所有数据请求走 HTTP 协议，d3.csv() 和 d3.json() 才能正常读到文件。

// main.js 起手式 import * as d3 from 'd3'; d3.csv('data/banana_inventory.csv').then(data => { const width = 800, height = 400; const svg = d3.select('#inventory-chart') .append('svg') .attr('width', width) .attr('height', height); console.log(data.length); });

这里有个值得注意的点：d3.fetch 系列方法返回的是 Promise，所以进入渲染逻辑前必须先等数据加载完成。把渲染函数拆出来，用 .then 调用，后续无论是换数据源还是加 loading 状态，都不用动主流程。我在项目里习惯把所有图形直接绑定到容器 div 本身的宽度上，SVG 的宽高从容器读取而不是写死数字，这一步是后面做响应式布局的前提。

3. 在 Banana 仪表板里实现四类核心 d3 图形：折线、柱状、环形与 Tooltip

3.1 库存趋势折线图：scaleTime 与 line 生成器

折线图是仪表板里信息密度最高的图形，Banana 库存趋势图要展示的是近 30 天各仓库的库存水位变化。核心思路是先用 scaleTime 和 scaleLinear 建立坐标系，再用 d3.line 生成器把数据点转成 SVG path 的 d 属性。

const margin = { top: 20, right: 30, bottom: 40, left: 50 }; const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; const xScale = d3.scaleTime() .domain(d3.extent(data, d => d.date)) .range([0, innerWidth]); const yScale = d3.scaleLinear() .domain([0, d3.max(data, d => d.stock)]) .range([innerHeight, 0]); const line = d3.line() .x(d => xScale(d.date)) .y(d => yScale(d.stock)) .curve(d3.curveMonotoneX);

xScale 的 domain 用了 d3.extent，它会同时算最小值和最大值，省去手写 Math.min/Math.max 的麻烦。yScale 的 range 写成 [innerHeight, 0] 是因为 SVG 坐标系的 y 轴向下，翻转之后数据大的值才显示在上方。curveMonotoneX 是画时间序列比较稳的曲线插值器，它保证曲线不会在数据点之间产生过度震荡。

坐标轴本身 d3 也提供了一级封装，d3.axisBottom(xScale) 和 d3.axisLeft(yScale) 会生成对应的刻度节点。刻度数量可以自由控制，默认情况一般够用，但数据跨度大时需要显式设置刻度密度，这个参数我在第四章的参数调优小节里展开。

拿到 line 生成器之后，渲染路径的代码很短：

svg.append('path') .datum(data) .attr('d', line) .attr('fill', 'none') .attr('stroke', '#5b9bd5') .attr('stroke-width', 2);

路径绘制用 datum() 而不是 data()，语义上也说得通：path 不是多条元素绑定多个数据，而是单个元素绑定整个数据集。stroke-width 默认 1 在大部分屏幕上看不清，建议至少 2。如果折线要区分仓库，可以在 path 上加 class，用 CSS 统一管理线型。

3.2 仓库分组柱状图：scaleBand 与多序列对比

第二块核心图形是各仓库近 7 天发货量的分组柱状图。分组柱状图的关键是 x 轴用 scaleBand 做离散分区，每组内部再用一个线性 scale 做二次偏移定位柱子。

const xScale = d3.scaleBand() .domain(warehouses) // warehouse 名称数组 .range([0, innerWidth]) .padding(0.25); const innerScale = d3.scaleBand() .domain(['shipment', 'return']) .range([0, xScale.bandwidth()]) .padding(0.1); svg.selectAll('.warehouse-group') .data(data, d => d.warehouse) .join('g') .attr('class', 'warehouse-group') .attr('transform', d => `translate(${xScale(d.warehouse)}, 0)`) .selectAll('rect') .data(d => [d.shipment, d.return]) .join('rect') .attr('x', (d, i) => innerScale(String(i))) .attr('y', d => yScale(d)) .attr('width', innerScale.bandwidth()) .attr('height', d => innerHeight - yScale(d));

这段代码有个嵌套数据绑定的模式值得注意：外层 selectAll g 绑定仓库列表，内层 selectAll rect 再绑定每个仓库的指标数组。内层的 data 回调返回的是一个新数组 [shipment, return]，d3 会对每个 g 元素单独执行一次内层绑定，这是 d3 处理层级结构的标准姿势。

height 属性用 innerHeight 减去 yScale(d) 是新手最容易算错的地方。因为 yScale 已经翻转了坐标，数据值越大 y 值越小，所以柱子高度必须用画布高度减掉映射后的 y 坐标。算错的症状是柱子倒着长或者图形顶部对齐。我的排查习惯是打开浏览器开发者工具，看 rect 的 y 和 height 是否满足 y 加 height 等于画布底部。

3.3 在途量环形占比图：arc 生成器与颜色序

环形图用于展示当前在途、已入库、待发运三个状态的占比。d3 的 arc 生成器配合 pie 布局函数可以把数据自动转成角度区间，省去手动计算弧度的工作。

const pie = d3.pie() .value(d => d.amount) .sort(null); // 保持数据原始顺序 const arc = d3.arc() .innerRadius(60) // 环形内径 .outerRadius(100) .cornerRadius(4); // 圆角，纯视觉优化 const color = d3.scaleOrdinal() .domain(['in_transit', 'warehoused', 'pending']) .range(['#e8a33d', '#5b9bd5', '#8fbf5f']); svg.selectAll('path') .data(pie(data)) .join('path') .attr('d', arc) .attr('fill', d => color(d.data.status));

pie 布局函数接收原始数据数组，输出带 startAngle 和 endAngle 的对象数组，这些角度信息直接喂给 arc 生成器得到 path 路径字符串。sort(null) 必须显式声明，否则 d3 会按数值大小重排扇区，导致图例顺序和实际渲染顺序不一致。

scaleOrdinal 是离散数据映射颜色的标准工具，domain 传入状态名称数组，range 传入对应色值数组。颜色选择上建议避开红绿这对色盲友好性差的组合，如果团队内部有设计规范，把色值抽成常量统一维护会更稳妥。环形图的实际半径由 innerRadius 和 outerRadius 之差决定，差值越大环越厚，60/100 的组合在大多数仪表板里视觉比例比较协调。

扇区之间默认没有间隙，cornerRadius 会同时给扇区加圆角和微小间隙，视觉上精致不少。要注意的是 cornerRadius 不宜大于内外径差值的一半，否则圆角会互相挤压变形。

3.4 Tooltip 悬浮交互：从样式到定位

Tooltip 是让仪表板"活"起来的第一个交互点。d3 本身不提供 Tooltip 组件，标准做法是在 body 下挂一个绝对定位的 div，鼠标移入图形时更新内容并调整位置，移出时隐藏。

const tooltip = d3.select('body') .append('div') .attr('class', 'tooltip') .style('position', 'absolute') .style('opacity', 0); svg.selectAll('rect') .on('mouseenter', (event, d) => { tooltip .style('opacity', 1) .html(`<strong>${d.warehouse}</strong><br/>发货量: ${d.shipment}`); }) .on('mousemove', (event) => { tooltip .style('left', (event.pageX + 12) + 'px') .style('top', (event.pageY - 28) + 'px'); }) .on('mouseleave', () => tooltip.style('opacity', 0));

鼠标事件回调的第一个参数是原生 event，第二个参数才是绑定到该节点的数据。这个参数顺序在 d3 的 v6 版本做过调整，老项目升级时常见坑是拿 event 当数据用。定位逻辑加 12 像素偏移是为了避免 tooltip 遮挡鼠标所在的图形节点，减 28 像素则是让提示框浮在鼠标上方而不是下方，这两个偏移值需要根据提示框尺寸微调。

Tooltip 的内容格式用 template 字符串拼 HTML，d3 的 .html 方法会直接解析。如果内容是纯文本，用 .text 方法会更安全，避免注入问题。数据量大的场景建议把 Tooltip 的 DOM 节点只创建一次，频繁创建销毁会影响性能。

需要单独提一下 CSS：Tooltip 节点必须设置 pointer-events: none，否则鼠标移动到提示框上时，原图形的 mouseleave 会被触发，Tooltip 又会隐藏，形成循环抖动。这个问题在第五章会作为独立避坑点再讲一次，因为它确实太容易犯。

4. 把 Banana 仪表板完整跑起来：数据接入、布局与参数调优

4.1 数据接入：把 CSV 和 JSON 对齐成同一套字段

Banana 仪表板的数据源有两个：库存 CSV 文件和接口返回的 JSON。让两套数据在字段命名上保持一致是接入环节最重要的事。我习惯在建项目第一天就定好字段规范：date 统一用 ISO 格式字符串，数值字段统一用 number 类型，状态枚举统一小写下划线。字段没有对齐，后面每一个图形都要单独处理数据格式，维护成本翻倍。

// 统一数据入口：解析 CSV 后转成标准结构 function parseInventory(csvRow) { return { date: new Date(csvRow.date), warehouse: csvRow.warehouse, stock: Number(csvRow.stock), shipment: Number(csvRow.shipment), return: Number(csvRow.return) }; } // 接口 JSON 同样映射到同一结构 const apiData = await fetch('/api/banana/overview').then(r => r.json()); const normalized = apiData.warehouses.map(item => ({ date: new Date(item.bizDate), warehouse: item.warehouseCode, stock: Number(item.stockQty), shipment: Number(item.shipQty), return: Number(item.returnQty) }));

Number() 做显式转换是必须的。CSV 读出来的所有字段默认都是字符串，不转换的话 d3 的 scaleLinear 会把整个坐标轴算蹦。JSON 接口返回的数值字段虽大概率是 number 类型，但为防御上游字段类型调整，统一转换一次成本很低，收益是渲染逻辑里不用再担心隐式类型转换。

日期字段同样要转成 Date 对象而不是留字符串。scaleTime 的 domain 接受 Date 实例或时间戳数值，如果传入 ISO 字符串，d3 内部会尝试解析，解析失败时坐标轴会直接报错并且图形消失。这个转换尽量在数据入口处完成，不要散落在各个图形的数据处理逻辑里，否则同一个字段在折线图转一次、在柱状图又转一次，迟早出漏子。

4.2 页面布局：栅格容器与 SVG 自适应

仪表板页面的布局用 CSS Grid 比 Flexbox 更合适，因为仪表板天然是行列结构。左边折线图占大块，右上是柱状图，右下是环形图，底部放数据表，这个布局用 grid-template-areas 表达最直观。

.dashboard-grid { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: auto auto; grid-template-areas: "trend chart-1" "trend chart-2"; gap: 16px; }

每个图形容器都给固定的宽高比例，SVG 在容器内部自适应。d3 生成 SVG 后默认宽高固定，容器变化时图形不会自动跟着缩放，所以需要在初始化时读取容器的 clientWidth 和 clientHeight 作为画布尺寸。更稳健的做法是结合 ResizeObserver 监听容器尺寸变化，尺寸变了就重新渲染对应图形。

const container = document.getElementById('trend-chart'); const width = container.clientWidth; const svg = d3.select(container) .append('svg') .attr('viewBox', `0 0 ${width} ${height}`) .attr('preserveAspectRatio', 'xMidYMid meet');

viewBox 加 preserveAspectRatio 的组合让 SVG 具备天然的响应式能力。viewBox 定义的是内部坐标系统，preserveAspectRatio 定义的是缩放对齐策略。这样写的好处是容器宽度变化时 SVG 按比例缩放，图形不会变形，代价是文字也会跟着缩放，所以仪表板上的字体不要设得太小，至少 12px 起步。

4.3 图形参数调优：过渡时长、颜色与刻度密度

参数调优是仪表板从"能看"到"好用"的最后一公里。先说过渡动画，d3 的 transition 是自动排队执行的，默认时长 250ms。同一时间多个图形同时在播动画，视觉上会显得杂乱。我的经验是联动动画统一 300ms、入场动画统一 400ms，超过 600ms 用户会明显感觉卡。

颜色参数方面：连续数值字段用 scaleSequential 配合插值器，离散状态字段用 scaleOrdinal。Banana 仪表板里我把库存水位按阈值分成三个状态，低库存用黄、健康用绿、积压用蓝，三个色值来自同一套色板，保证色相上没有突兀跳跃。颜色没有标准答案，但有个原则：色板里不要出现饱和度完全相同的两种颜色，相邻状态之间色相差距要明显。

最后说刻度密度。scaleLinear 的 ticks 方法接收期望刻度数量，d3 会根据数据范围自动选择间隔值。日期轴的刻度密度问题更常见，30 天的数据如果默认密集刻度，标签旋转 45 度依然重叠。处理办法是显式设置刻度间隔：

const xAxis = d3.axisBottom(xScale) .ticks(d3.timeWeek.every(1)) // 每周一个刻度 .tickFormat(d3.timeFormat('%m-%d'));

d3.timeWeek.every(1) 表示按周切刻度，时间轴的刻度密度用这种单位过滤的方式控制最顺手。tickFormat 把 Date 转成月-日格式展示，让轴标签更短也更易读。补充一个细节：SVG 的 text 元素默认不换行，长标签需要手动 split 成多行 tspan，这在仓库名称较长时特别常见。

5. Banana 仪表板的 d3 避坑指南：5 个高频翻车点与排查方法

5.1 数据更新时图形重复渲染

现象：仪表板定时刷新数据后，柱状图多了一倍的柱子，旧图形没有被清理。

原因：数据绑定用 data() 时没有传 key 函数，d3 按下标匹配新旧数据。数据数组顺序变化或长度变化时，d3 无法识别哪些节点是复用的，哪些是新增的，结果既有节点被复用，又有新节点被创建。

解决：给 data() 传第二个参数，用业务主键做 key。比如仓库柱状图用 warehouse 字段做 key，这样 d3 能精准判断节点归属：

svg.selectAll('.bar') .data(newData, d => d.warehouse) // key 函数是修复的关键 .join('rect') .attr('x', d => xScale(d.warehouse)) .attr('y', d => yScale(d.value)) .attr('height', d => innerHeight - yScale(d.value));

这是第一次给 Banana 仪表板加轮询刷新功能时踩的坑，数据一刷图形就翻倍，还以为内存泄漏。后来打开开发者工具检查 DOM 才发现是 key 函数缺失，d3 把新旧数据当成完全不同的实体。自此之后，凡是 data() 后面接 join()，我都先问一句 key 函数写了没有。

5.2 坐标轴刻度挤成一团

现象：日期轴标签全部堆叠在一起，文字完全重叠，图表没法阅读。

原因：数据跨度大时 scaleTime 默认生成的刻度数量过多，轴标签宽度超过相邻刻度间距。另一个常见原因是 SVG 画布宽度不够，margin 设置过小，坐标轴没有足够的空间展示刻度文字。

解决：把轴标签旋转成 45 度，同时限制刻度数量。旋转在 SVG 里用 transform 实现：

svg.selectAll('.tick text') .attr('transform', 'rotate(-45)') .attr('text-anchor', 'end') .attr('dx', '-5') .attr('dy', '5');

诊断这个问题建议按顺序来：先看刻度数量是否超限，把轴对象打出来确认 tick 数组长度；再看 margin 是否足够；最后才考虑旋转标签。旋转标签是表面修法，真正的问题是刻度密度不合理，配合第四章提到的 d3.timeWeek.every(1) 控制密度才是治本。

5.3 窗口缩放后图形错位

现象：浏览器窗口拉伸后，图表区域出现大片空白，或者图形溢出了容器边界。

原因：SVG 的 width 和 height 属性在初始化时写死，窗口缩放只改变浏览器视口，SVG 尺寸不跟着更新。容器 div 的实际尺寸变了，SVG 还停留在旧尺寸上。

解决：用 ResizeObserver 监听容器尺寸，尺寸变化后重绘图形。或者给 SVG 设置 viewBox 让它跟随容器缩放。两种方案取舍如下：viewBox 适合图形简单、文字不多的场景；重绘画布适合需要保持文字清晰度的场景。

const observer = new ResizeObserver(() => { const newWidth = container.clientWidth; if (Math.abs(newWidth - currentWidth) > 10) { renderTrendChart(container, newWidth); // 防抖之后重绘 } }); observer.observe(container);

重绘前加一个 10px 的阈值判断，避免窗口微调时频繁重绘。踩过的坑是没有做防抖，窗口拖拽的时候图表连续重绘十几次，CPU 直接拉满。ResizeObserver 的回调本身频率不高，但配合窗口 resize 触发时还是建议加个阈值，稳一点没坏处。

5.4 过渡动画导致白屏闪烁

现象：数据刷新时，整个 SVG 区域先闪一下空白，再重新画出来。

原因：常见的两个做法同时用错了：刷新时先调用 selectAll().remove() 清空画布，又调用了 transition() 播放入场动画。清空动作把旧元素全部销毁，动画播放期间画布是空的，视觉上就是白屏。

解决：不要清空重画，用数据绑定配合 transition 做平滑更新。d3 的 join 模式天然支持新旧数据的过渡：

svg.selectAll('.bar') .data(newData, d => d.warehouse) .join( enter => enter.append('rect').attr('x', enterX), update => update, // update 部分不用动 exit => exit.attr('opacity', 0).remove() ) .transition() .duration(300) .attr('y', d => yScale(d.value));

这个写法把 enter、update、exit 三个阶段明确分开。enter 阶段先画一个不透明度的初始图形，update 阶段用 transition 把位置和数据值更新到目标状态，exit 阶段先淡出再移除。整套流程没有清空画布的动作，白屏闪烁自然消失。

5.5 Tooltip 在快速移动时残留脏数据

现象：鼠标快速扫过多个图形时，Tooltip 里的内容闪烁不定，偶尔出现上一个数据残留。

原因：mouseenter 和 mouseleave 事件在快速移动时频繁触发，Tooltip 的内容更新和隐藏逻辑互相竞争。mouseleave 先执行把透明度置 0，紧跟着的 mouseenter 又把它置 1，视觉上就是闪烁。

解决：内容更新和显隐控制分开处理。mouseenter 只负责写内容和显示，mouseleave 只负责隐藏。避免在 mouseenter 里做条件判断决定是否显示 Tooltip：

.on('mouseenter', (event, d) => { tooltip.html(formatTip(d)); tooltip.style('opacity', 1); }) .on('mousemove', (event) => { tooltip.style('left', (event.pageX + 12) + 'px'); tooltip.style('top', (event.pageY - 28) + 'px'); }) .on('mouseleave', () => { tooltip.style('opacity', 0); });

Tooltip 必须设置 pointer-events: none。如果不设，Tooltip 定位在鼠标附近，自己也能触发鼠标事件，鼠标移动到提示框上时原图形的 mouseleave 会被触发，Tooltip 又会隐藏，形成循环抖动。这个 CSS 属性哪怕漏了，交互体验会瞬间从"可用"跌到"玄学"，排查时也最容易被忽略。

6. 让 Banana 仪表板更进一步：钻取联动与增量刷新

6.1 点击柱状图钻取到仓库明细

当图形不再只是展示，而是能响应用户操作时，仪表板才真正有了决策价值。最常见的进阶交互是钻取：点击柱状图中的某个仓库柱子，下方数据表切换成该仓库近 7 天的每日明细。实现思路是给柱状图绑定 click 事件，把点击的 warehouse 值写入全局状态，再触发数据表的重新渲染。

svg.selectAll('.bar') .on('click', (event, d) => { currentWarehouse = d.warehouse; renderDetailTable(currentWarehouse); renderTrendChartForWarehouse(currentWarehouse); });

钻取联动需要先约定好全局状态是怎么传递的。我习惯用一个简单的状态对象维护当前选中项，所有图形从这个状态对象读取选中值来决定自己的渲染内容。被选中的柱子高亮，其他柱子降透明度，形成视觉焦点。跨图形联动最难的不是代码，是状态同步逻辑，建议把所有图形渲染函数都收敛为"只依赖状态对象"，避免各自维护内部状态导致不同步。

6.2 增量刷新还是全量刷新

刷新策略直接影响仪表板的性能表现。增量刷新的做法是定时请求新增数据，只更新新增部分；全量刷新是把整份数据重新拉回来重绘。对于 Banana 仪表板这种数据量在一万行以内的场景，全量刷新反而更简单可靠。增量刷新需要维护上次请求的时间戳、处理数据去重、还要小心 key 函数匹配错误，复杂度收益不成正比。

定时刷新需要注意清理定时器，页面切到后台时用 document.visibilityState 判断是否暂停刷新，避免无意义请求。

setInterval(() => { if (document.visibilityState === 'visible') { refreshDashboard(); } }, 30000);

这个 30 秒的轮询间隔是个经验值。对库存管理仪表板来说，30 秒足够及时又不至于给后端造成压力。做过一次把刷新间隔设成 5 秒的实战，数据接口扛不住不说，浏览器端动画也在不停打断用户操作，后来调回 30 秒问题消失。刷新完成之后记得更新页面上最后更新时间，这个细节最能提升用户对数据时效性的信任。

回头看，LoremIpsumDashboard 这个项目的核心价值其实不在 d3 API 本身，而在于它逼着你把"数据 → 映射 → 交互"这条链路完整走了一遍。踩过数据绑定没写 key 的坑、见过坐标轴刻度挤成一团的丑图、调过动画白屏的参数之后，再去看任何图表库的底层实现都能一眼抓住本质。这也是我的一个习惯：接手任何可视化需求，先画数据流图，再决定用不用 d3，而不是上来就抄配置。希望帮到你。

本文还有配套的精品资源，点击获取