This commit is contained in:
Lichene 2025-11-14 00:51:12 +01:00
parent 3a89135e6e
commit 895498118e

View file

@ -5,13 +5,15 @@ var margin = [20, 120, 20, 140],
duration = 1250,
root;
var tree = d3.layout.tree()
.size([height, width]);
var tree = d3.layout.tree().size([height, width]);
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });
var diagonal = d3.svg.diagonal().projection(function (d) {
return [d.y, d.x];
});
var vis = d3.select("#body").append("svg:svg")
var vis = d3
.select("#body")
.append("svg:svg")
.attr("width", width + margin[1] + margin[3])
.attr("height", height + margin[0] + margin[2])
.append("svg:g")
@ -47,68 +49,127 @@ function update(source) {
var nodes = tree.nodes(root).reverse();
// Normalize for fixed-depth.
nodes.forEach(function(d) { d.y = d.depth * 180; });
nodes.forEach(function (d) {
d.y = d.depth * 180;
});
// Update the nodes…
var node = vis.selectAll("g.node")
.data(nodes, function(d) { return d.id || (d.id = ++i); });
var node = vis.selectAll("g.node").data(nodes, function (d) {
return d.id || (d.id = ++i);
});
// Enter any new nodes at the parent's previous position.
var nodeEnter = node.enter().append("svg:g")
var nodeEnter = node
.enter()
.append("svg:g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
.on("click", function(d) { toggle(d); update(d); });
.attr("transform", function (d) {
return "translate(" + source.y0 + "," + source.x0 + ")";
})
.on("click", function (d) {
toggle(d);
update(d);
});
nodeEnter.append("svg:circle")
nodeEnter
.append("svg:circle")
.attr("r", 1e-6)
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
.style("fill", function (d) {
return d._children ? "lightsteelblue" : "#fff";
});
nodeEnter.append('a')
nodeEnter
.append("a")
.attr("target", "_blank")
.attr('xlink:href', function(d) { return d.url; })
.attr("xlink:href", function (d) {
return d.url;
})
.append("svg:text")
.attr("x", function(d) { return d.children || d._children ? -10 : 10; })
.attr("x", function (d) {
return d.children || d._children ? -10 : 10;
})
.attr("dy", ".35em")
.attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
.text(function(d) { return d.name; })
.style("fill: rgb(0, 0, 0)", function(d) { return d.free ? 'black' : '#999'; })
.style("fill-opacity", 1e-6);
nodeEnter.append("svg:title")
.attr("text-anchor", function (d) {
return d.children || d._children ? "end" : "start";
})
.text(function (d) {
return d.name;
})
.style("fill: rgb(0, 0, 0)", function (d) {
return d.free ? "black" : "#999";
})
.style("fill-opacity", 1e-6);
nodeEnter
.filter(function (d) {
return !d.children && !d._children;
}) // Only leaf nodes
.append("a")
.attr("target", "_blank")
.attr("xlink:href", function (d) {
// Assuming your notes are in a "notes" folder with filename based on node name
return (
"https://git.hackinpovo.it/HackInPovo/resources/src/branch/main/Notes/" +
d.name +
".txt"
);
// Or if you have a specific property: return d.notesUrl;
})
.append("svg:text")
.attr("x", function (d) {
// Position to the right of the node name
// Adjust the offset (60) based on your node name lengths
return 10 + 60;
})
.attr("dy", ".35em")
.attr("text-anchor", "start")
.text(" [Notes]")
.style("fill", "blue")
.style("fill-opacity", 1e-6)
.style("text-decoration", "underline");
nodeEnter.append("svg:title").text(function (d) {
return d.description;
});
// Transition nodes to their new position.
var nodeUpdate = node.transition()
var nodeUpdate = node
.transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
.attr("transform", function (d) {
return "translate(" + d.y + "," + d.x + ")";
});
nodeUpdate.select("circle")
nodeUpdate
.select("circle")
.attr("r", 6)
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
.style("fill", function (d) {
return d._children ? "lightsteelblue" : "#fff";
});
nodeUpdate.select("text")
.style("fill-opacity", 1);
nodeUpdate.select("text").style("fill-opacity", 1);
// Transition exiting nodes to the parent's new position.
var nodeExit = node.exit().transition()
var nodeExit = node
.exit()
.transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
.attr("transform", function (d) {
return "translate(" + source.y + "," + source.x + ")";
})
.remove();
nodeExit.select("circle")
.attr("r", 1e-6);
nodeExit.select("circle").attr("r", 1e-6);
nodeExit.select("text")
.style("fill-opacity", 1e-6);
nodeExit.select("text").style("fill-opacity", 1e-6);
// Update the links…
var link = vis.selectAll("path.link")
.data(tree.links(nodes), function(d) { return d.target.id; });
var link = vis.selectAll("path.link").data(tree.links(nodes), function (d) {
return d.target.id;
});
// Enter any new links at the parent's previous position.
link.enter().insert("svg:path", "g")
link
.enter()
.insert("svg:path", "g")
.attr("class", "link")
.attr("d", function (d) {
var o = { x: source.x0, y: source.y0 };
@ -119,12 +180,12 @@ function update(source) {
.attr("d", diagonal);
// Transition links to their new position.
link.transition()
.duration(duration)
.attr("d", diagonal);
link.transition().duration(duration).attr("d", diagonal);
// Transition exiting nodes to the parent's new position.
link.exit().transition()
link
.exit()
.transition()
.duration(duration)
.attr("d", function (d) {
var o = { x: source.x, y: source.y };