test
This commit is contained in:
parent
3a89135e6e
commit
895498118e
1 changed files with 140 additions and 79 deletions
143
public/js/arf.js
143
public/js/arf.js
|
|
@ -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 };
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue