fa5680f0dd
- Introduced custodian_hub_v3.mmd, custodian_hub_v4_final.mmd, and custodian_hub_v5_FINAL.mmd for Mermaid representation. - Created custodian_hub_FINAL.puml and custodian_hub_v3.puml for PlantUML representation. - Defined entities such as CustodianReconstruction, Identifier, TimeSpan, Agent, CustodianName, CustodianObservation, ReconstructionActivity, Appellation, ConfidenceMeasure, Custodian, LanguageCode, and SourceDocument. - Established relationships and associations between entities, including temporal extents, observations, and reconstruction activities. - Incorporated enumerations for various types, statuses, and classifications relevant to custodians and their activities.
61 lines
1.6 KiB
Markdown
61 lines
1.6 KiB
Markdown
|
|
var simulation = d3.forceSimulation()
|
|
.force("link", d3.forceLink().id(function(d) { return d.id; }))
|
|
.force("charge", d3.forceManyBody())
|
|
.force("center", d3.forceCenter(width / 2, height / 2));
|
|
```
|
|
|
|
**GLAM D3 v7 + React:**
|
|
```typescript
|
|
// d3-graph.ts
|
|
import * as d3 from 'd3';
|
|
import { useEffect, useRef } from 'react';
|
|
|
|
export interface GraphNode extends d3.SimulationNodeDatum {
|
|
id: string;
|
|
label: string;
|
|
type: string;
|
|
}
|
|
|
|
export interface GraphLink extends d3.SimulationLinkDatum<GraphNode> {
|
|
source: string | GraphNode;
|
|
target: string | GraphNode;
|
|
label: string;
|
|
}
|
|
|
|
export const useD3ForceGraph = (
|
|
nodes: GraphNode[],
|
|
links: GraphLink[],
|
|
width: number,
|
|
height: number
|
|
) => {
|
|
const svgRef = useRef<SVGSVGElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (!svgRef.current) return;
|
|
|
|
const svg = d3.select(svgRef.current);
|
|
svg.selectAll('*').remove();
|
|
|
|
const simulation = d3.forceSimulation(nodes)
|
|
.force('link', d3.forceLink<GraphNode, GraphLink>(links)
|
|
.id(d => d.id)
|
|
.distance(100))
|
|
.force('charge', d3.forceManyBody().strength(-300))
|
|
.force('center', d3.forceCenter(width / 2, height / 2))
|
|
.force('collision', d3.forceCollide().radius(30));
|
|
|
|
// Node and link rendering...
|
|
|
|
return () => {
|
|
simulation.stop();
|
|
};
|
|
}, [nodes, links, width, height]);
|
|
|
|
return svgRef;
|
|
};
|
|
```
|
|
|
|
## Migration Checklist Complete
|
|
|
|
See the checklist above for complete phase-by-phase migration steps.
|