企业官网建设流程全解析

Dataset.js（Miso.Dataset）是一个面向客户端可视化的 JavaScript 数据管理库，负责数据的加载、解析、排序、过滤与查询。本文带你快速掌握 Dataset.js 数据增删改查的四大核心 API——add、update、remove、reset，让你轻松驾驭前端数据操作。

Dataset 采用列式存储：每一列独立保存数据数组，每行自动分配唯一的_id主键（主键列名可通过idAttribute自定义）。增删改查正是围绕这套结构展开的。

快速上手：三步创建第一个数据集

先创建一个简单的数据集，数据可以是本地 JS 对象，也可以是远程 URL：

var ds = new Miso.Dataset({ data: [ { one: 1, two: 4, three: 7 }, { one: 2, two: 5, three: 8 } ] }); ds.fetch({ success: function() { // 数据就绪，this 指向数据集本身 } });

💡 无论数据来自本地还是远程，都要通过fetch()触发解析入库。完整的创建参数（如sync、resetOnFetch、uniqueAgainst）见 src/constructor.js。

add 添加数据：一行或批量，主键自动补全

add接受单个行对象或对象数组，一次添加多行：

ds.add({ one: 44, two: 9 }); // 添加一行 ds.add([{ one: 44 }, { one: 55 }]); // 批量添加

它的几个关键行为：

• 自动补全_id：新行没有主键时会自动生成一个唯一 id；
• 缺失列填 null：某列没有提供值时自动填null，保持各行列数一致；
• 类型校验：值必须与列的类型匹配，否则会抛出错误；
• 返回 this：支持链式调用。

完整示例见 examples/api/dataset/add.js，核心实现在 src/dataset.js#L479-L510。

update 更新数据：按 _id 精确定位，也支持函数式批量修改

update是最灵活的 API，支持三种传入方式：

① 单个行对象（必须带_id）

var firstRow = ds.rowByPosition(0); ds.update({ _id: firstRow._id, one: 100 });

② 对象数组（批量更新）

ds.update([ { _id: id1, two: 10 }, { _id: id2, two: 20 } ]);

③ 函数式（逐行处理，条件更新）

ds.update(function(row) { if (row.three === 7) { row.two = 99; return row; // 返回新行对象 = 应用修改 } return false; // 返回 false = 跳过这一行 });

⚠️三个易踩的坑：

此外，如果数据集中有计算列（computed column），更新普通列后计算列会自动重新求值。示例见 examples/api/dataset/update.js，实现位于 src/dataset.js#L650-L668。

remove 删除数据：按 ID 删，或按条件批量删

remove的过滤条件支持两种形式：

① 传行 id，删除指定行

ds.remove(ds.rowByPosition(0)._id);

② 传过滤函数，返回 true 的行被删除

ds.remove(function(row) { return row.three === 7; // 删除 three 等于 7 的所有行 });

实现上会先收集所有待删行的 id，再统一移除，避免边遍历边删除导致的中断问题。示例见 examples/api/dataset/remove.js，源码在 src/dataset.js#L528-L551。

reset 清空数据：一秒重置整个数据集

reset会把所有列的数据清空、行数归零，但列结构本身保留：

ds.reset(); // ds.length === 0，列定义仍在

它的进阶玩法是配合resetOnFetch选项：

var ds = new Miso.Dataset({ url: "data.json", resetOnFetch: true // 每次重新拉取时先清空再写入 });

这样轮询或多次 fetch 时，数据集始终与最新数据保持一致，而不是不断累积。若只想"更新已有行 + 追加新行"，可改用uniqueAgainst指定一列作为唯一性判断依据。reset实现见 src/dataset.js#L678-L686，示例见 examples/api/dataset/reset.js。

事件驱动：让图表随数据变化自动刷新

创建时加上sync: true，四大操作都会触发事件，这是 Dataset 驱动实时可视化的核心机制：

var ds = new Miso.Dataset({ data: [...], sync: true }); ds.bind('add', function(e) { /* 有行被添加 */ }); ds.bind('update', function(e) { /* 有行被修改 */ }); ds.bind('remove', function(e) { /* 有行被删除 */ }); ds.bind('reset', function() { /* 数据被清空 */ }); ds.bind('change', function(e) { /* 以上变化的统一入口 */ });

事件对象还能帮你精确定位改动范围：e.affectedColumns()返回受影响的列，Dataset.Event.isAdd(e.deltas[0])、isRemove、isUpdate可以判断变化类型。想"只重绘某几列"时非常实用。事件源码见 src/sync.js，示例见 examples/api/event/affected-columns.js。

另外，add、update、remove都支持第二个参数{ silent: true }，可在不触发事件的前提下静默修改数据（例如初始化批量导入时避免图表反复重绘）。

四大 API 速查表

常见问题排查

• fetch后数据是空的？确认success回调中再执行增删改查，本地与远程数据都必须先 fetch；
• update 报类型错误？列类型是 fetch 时自动检测的，传入前可用coerce或类型转换处理值，列类型说明见 src/types.js；
• 删了行，视图没更新？检查创建时是否设置了sync: true，以及是否误传了{ silent: true }。

单元测试覆盖了上述全部行为，可对照 test/unit/dataset.js 查看预期行为。

相关资源

• 核心实现：src/dataset.js
• 官方可运行示例：examples/api/dataset/
• 数据解析器（CSV、JSON、Strict）：src/parsers/
• 数据导入器（本地、远程、轮询）：src/importers/
• 库总览文档：README.md

掌握add、update、remove、reset这四个 API，配合事件订阅，你就具备了用 Dataset.js 管理客户端可视化数据的全部核心能力。