@data-navigator/inspector 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +23 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -26,6 +26,29 @@ Data Navigator is organized into 3 composable modules:
|
|
|
26
26
|
|
|
27
27
|
These modules can be used together or independently. Visit [the docs](https://dig.cmu.edu/data-navigator/getting-started/) for a step-by-step guide to building your first navigable chart.
|
|
28
28
|
|
|
29
|
+
## Inspector
|
|
30
|
+
|
|
31
|
+
The optional **[@data-navigator/inspector](https://www.npmjs.com/package/@data-navigator/inspector)** package provides a visual graph of your data-navigator structure, useful for debugging and understanding navigation paths.
|
|
32
|
+
|
|
33
|
+
```
|
|
34
|
+
npm install @data-navigator/inspector data-navigator d3-array d3-drag d3-force d3-scale d3-scale-chromatic d3-selection
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
```js
|
|
38
|
+
import dataNavigator from 'data-navigator';
|
|
39
|
+
import { Inspector } from '@data-navigator/inspector';
|
|
40
|
+
|
|
41
|
+
const inspector = Inspector({
|
|
42
|
+
structure: myStructure, // made using data navigator
|
|
43
|
+
container: 'inspector-container' // render to DOM
|
|
44
|
+
});
|
|
45
|
+
|
|
46
|
+
// Sync with navigation events
|
|
47
|
+
inspector.highlight(nodeId);
|
|
48
|
+
inspector.clear();
|
|
49
|
+
inspector.destroy();
|
|
50
|
+
```
|
|
51
|
+
|
|
29
52
|
## Contributing
|
|
30
53
|
|
|
31
54
|
See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions and development workflow.
|