49 lines
1.3 KiB
JavaScript
49 lines
1.3 KiB
JavaScript
// Erstelle eine einfache Mindmap-Struktur mit D3.js
|
|
const data = {
|
|
name: "Wissenschaftliche Mindmap",
|
|
children: [
|
|
{ name: "Forschung", children: [{ name: "Theorie" }, { name: "Experimente" }] },
|
|
{ name: "Technologie", children: [{ name: "Datenbanken" }, { name: "Cloud Computing" }] }
|
|
]
|
|
};
|
|
|
|
// D3.js-Setup für die Darstellung der Mindmap
|
|
const width = 800;
|
|
const height = 600;
|
|
const margin = 50;
|
|
|
|
const svg = d3.select("#mindmap")
|
|
.append("svg")
|
|
.attr("width", width)
|
|
.attr("height", height);
|
|
|
|
const root = d3.hierarchy(data);
|
|
const treeLayout = d3.tree().size([width - margin, height - margin]);
|
|
treeLayout(root);
|
|
|
|
const links = svg.selectAll(".link")
|
|
.data(root.links())
|
|
.enter()
|
|
.append("line")
|
|
.attr("class", "link")
|
|
.attr("x1", d => d.source.x + margin)
|
|
.attr("y1", d => d.source.y + margin)
|
|
.attr("x2", d => d.target.x + margin)
|
|
.attr("y2", d => d.target.y + margin)
|
|
.attr("stroke", "#2c3e50");
|
|
|
|
const nodes = svg.selectAll(".node")
|
|
.data(root.descendants())
|
|
.enter()
|
|
.append("g")
|
|
.attr("class", "node")
|
|
.attr("transform", d => `translate(${d.x + margin},${d.y + margin})`);
|
|
|
|
nodes.append("circle")
|
|
.attr("r", 20)
|
|
.attr("fill", "#3498db");
|
|
|
|
nodes.append("text")
|
|
.attr("dx", 25)
|
|
.attr("dy", 5)
|
|
.text(d => d.data.name); |