| 1 | # Connector 数据接入
|
| 2 |
|
| 3 | 一个数据视图（DataSet.DataView）实例在接入数据时就会用到 Connector，其语法如下：
|
| 4 |
|
| 5 | ```javascript
|
| 6 | dv.source(data, {
|
| 7 | type: `${connectorName}`,
|
| 8 | ...otherOptions,
|
| 9 | });
|
| 10 | ```
|
| 11 |
|
| 12 | 举个例子：
|
| 13 |
|
| 14 | ```javascript
|
| 15 | const testCSV = `Expt,Run,Speed
|
| 16 | 1,1,850
|
| 17 | 1,2,740
|
| 18 | 1,3,900
|
| 19 | 1,4,1070`;
|
| 20 |
|
| 21 | const dv = new DataSet.DataView().source(testCSV, {
|
| 22 | type: 'csv',
|
| 23 | });
|
| 24 |
|
| 25 | console.log(dv.rows);
|
| 26 | /*
|
| 27 | * dv.rows:
|
| 28 | * [
|
| 29 | * {Expt: " 1", Run: "1", Speed: "850"}
|
| 30 | * {Expt: " 1", Run: "2", Speed: "740"}
|
| 31 | * {Expt: " 1", Run: "3", Speed: "900"}
|
| 32 | * {Expt: " 1", Run: "4", Speed: "1070"}
|
| 33 | * ]
|
| 34 | */
|
| 35 | ```
|
| 36 |
|
| 37 | 上述代码中，数据视图实例 `dv` 使用 `csv` 类型的 Connector 载入了一段 CSV 文本。
|
| 38 |
|
| 39 | 目前 DataSet 支持以下几种常用的 Connector：
|
| 40 |
|
| 41 | ## 默认
|
| 42 |
|
| 43 | 直接调用 `dv.source(data)`，不通过配置项指定使用的 Connector 时，则有以下两种默认的情形：
|
| 44 |
|
| 45 | 第一种，data 传入的是具体数组数据，那么
|
| 46 |
|
| 47 | ```javascript
|
| 48 | dv.rows = deepClone(data);
|
| 49 | ```
|
| 50 |
|
| 51 | 第二种，data 传入的是另一个 DataView 的实例或者实例的名称，那么
|
| 52 |
|
| 53 | ```javascript
|
| 54 | dv.rows = deepClone(ds.getView(otherDv).rows);
|
| 55 | ```
|
| 56 |
|
| 57 | ## dsv
|
| 58 |
|
| 59 | 具体用法见示例：
|
| 60 |
|
| 61 | ```javascript
|
| 62 | dv.source(dsvStr, {
|
| 63 | type: 'dsv', // 指定使用dsv connector
|
| 64 | delimiter: '|', // 指定分隔符
|
| 65 | });
|
| 66 | ```
|
| 67 |
|
| 68 | ## csv
|
| 69 |
|
| 70 | 具体用法见示例：
|
| 71 |
|
| 72 | ```javascript
|
| 73 | dv.source(csvStr, {
|
| 74 | type: 'csv', // 指定使用dsv connector
|
| 75 | delimiter: ',', // 指定分隔符
|
| 76 | });
|
| 77 | ```
|
| 78 |
|
| 79 | ## tsv
|
| 80 |
|
| 81 | 具体用法见示例：
|
| 82 |
|
| 83 | ```javascript
|
| 84 | dv.source(tsvStr, {
|
| 85 | type: 'tsv', // 指定使用tsv connector
|
| 86 | });
|
| 87 | ```
|
| 88 |
|
| 89 | ## GeoJSON
|
| 90 |
|
| 91 | 具体用法见示例：
|
| 92 |
|
| 93 | ```javascript
|
| 94 | dv.source(geojsonData, {
|
| 95 | type: 'GeoJSON', // 别名 geo / geojson
|
| 96 | });
|
| 97 | ```
|
| 98 |
|
| 99 | > dv.dataType 会被更改为 'geo'，从而 dv 可以执行一些 Geo 相关的实例方法。
|
| 100 |
|
| 101 | ## TopoJSON
|
| 102 |
|
| 103 | 具体用法见示例：
|
| 104 |
|
| 105 | ```javascript
|
| 106 | dv.source(topojsonData, {
|
| 107 | type: 'TopoJSON', // 别名 topojson
|
| 108 | object: 'xxx', // TopoJSON 相当于多个 GeoJSON 合并起来做了压缩，其中每一个 object 都相当于一份 GeoJSON 数据，指定 object 就是从中提取一份 Geo 数据
|
| 109 | });
|
| 110 | ```
|
| 111 |
|
| 112 | > dv.dataType 会被更改为 'geo'，从而 dv 可以执行一些 Geo 相关的实例方法。
|
| 113 |
|
| 114 | ## hierarchy
|
| 115 |
|
| 116 | 具体用法见示例：
|
| 117 |
|
| 118 | ```javascript
|
| 119 | dv.source(tree, {
|
| 120 | type: 'hierarchy', // 别名 tree
|
| 121 | children: (d) => d.children, // 可选，函数，返回子树
|
| 122 | });
|
| 123 | ```
|
| 124 |
|
| 125 | > dv.dataType 会被变更为 'hierarchy' ，从而 dv 可以执行一些树形结构相关的实例方法和 Transform。
|
| 126 |
|
| 127 | > dv.root 为根节点
|
| 128 |
|
| 129 | ## graph
|
| 130 |
|
| 131 | 具体用法见示例：
|
| 132 |
|
| 133 | ```javascript
|
| 134 | dv.source(graph, {
|
| 135 | type: 'graph',
|
| 136 | nodes: (d) => d.nodes, // 节点集对应字段
|
| 137 | edges: (d) => d.edges, // 边集对应字段
|
| 138 | });
|
| 139 | ```
|
| 140 |
|
| 141 | > dv.dataType 会被变更为 'graph'，从而 dv 可以执行图相关的实例方法和 Transform。
|