forcedirectedtree = {
const height = 500
const radius = 15
const distance = radius * 2
const color = d3.scaleOrdinal(d3.schemeCategory10);
const tooltip = d3.select("body").append("div")
.style("position", "absolute")
.style("background-color", "lightgray")
.style("color", "black")
.style("border-radius", "5px")
.style("padding", "10px")
.style("opacity", 0)
window.onmousemove = function (e) {
const x = (e.clientX + 10) + 'px', y = (e.clientY-10) + 'px';
tooltip.style("left", x).style("top", y);
};
const simulation = d3.forceSimulation(nodes)
.force("link", d3.forceLink(links).id(d => d.index).distance(distance).strength(1))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2))
.force("x", d3.forceX())
.force("y", d3.forceY())
.on("tick", ticked);
// Create the SVG container.
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
.attr("style", "max-width: 100%; height: auto;");
// Add a line for each link, and a circle for each node.
const link = svg.append("g")
.attr("stroke", "#000")
.attr("stroke-opacity", .7)
.selectAll("line")
.data(links)
.join("line")
const node = svg.append("g")
.attr("stroke", "#000")
.attr("stroke-width", 1.5)
.selectAll("circle")
.data(nodes)
.join("circle")
.attr("stroke", d => d.data.children ? "#000" : "red")
.attr("r", d=> radius - (d.depth * 3))
.attr("fill", d => color(d.depth));
//show tooltip over node
node
.on("mouseover", function(event,d){
tooltip.style("opacity", 1)
console.log("data:", d)
//cars
//tooltip.html(d.data.name)
//artworks
//use depth to determine labels
if (d.depth == 0){
tooltip.html("searched for "+query)
} else if (d.depth == 1){
tooltip.html("public domain? "+d.data[0])
} else if (d.depth == 2){//artist
tooltip.html(d.data[0])
} else {
tooltip.html( d.data.title )
}
})
.on("mouseleave", function(event,d){
tooltip
.style("opacity", 0)
})
// Add a drag behavior.
node.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
// Set the position attributes of links and nodes each time the simulation ticks.
function ticked() {
link
.attr("x1", d => d.source.x)
.attr("y1", d => d.source.y)
.attr("x2", d => d.target.x)
.attr("y2", d => d.target.y);
node
.attr("cx", d => d.x)
.attr("cy", d => d.y);
}
// Reheat the simulation when drag starts, and fix the subject position.
function dragstarted(event,d) {
if (!event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
// Update the subject (dragged node) position during drag.
function dragged(event, d) {
d.fx = event.x;
d.fy = event.y;
}
// Restore the target alpha so the simulation cools after dragging ends.
// Unfix the subject position now that it’s no longer being dragged.
function dragended(event, d) {
if (!event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
// When this cell is re-run, stop the previous simulation. (This doesn’t
// really matter since the target alpha is zero and the simulation will
// stop naturally, but it’s a good practice.)
invalidation.then(() => simulation.stop());
return svg.node();
}