- 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.
1.6 KiB
1.6 KiB
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.