chart = { const height = 800 const links = data.links.map(d => Object.create(d)); const nodes = data.nodes.map(d => Object.create(d)); var isTooltipHidden = true; const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id)) .force("charge", d3.forceManyBody()) .force("x", d3.forceX()) .force("y", d3.forceY()); const svg = d3.create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]); // root svg element, which makes global scaling/ transformations easier const root = svg.append("g"); const link = root.append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line") .data(links) .join("line") .attr("stroke-width", d => Math.sqrt(d.value)); const node = root.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(nodes) .join("circle") .attr("r", d => (d.group == "Movie") ? 8 : 5) .attr("fill", color) .call(drag(simulation)) .on("click", clickNode) .on("mouseover", mouseover) .on("mouseout", mouseout); var legend_data = [ {text: "Movie", color: "#1F77B4"}, {text: "Director", color: "#FF7F0F"}, {text: "Actor", color: "#2DA02D"} ] const legend = root .append('g') .attr('class', 'legend') .attr('transform', `translate(${-width / 2 }, ${-height / 2 + 10})`) .selectAll('g') .data(legend_data) .enter() .append('g') .attr('transform', function(d, i) { return 'translate('+ (10) +',' + (10+(25*i)) +')'; }); legend .append('rect') .attr('width', 20) .attr('height', 20) .style('fill', (d, i) => d.color); legend .append('text') .text(d => d.text) .attr('x', 25) .attr('y', 25/2) .attr('dy', 4); node.append("title") .text(d => d.name); var texts = root.selectAll(".texts") .data(nodes) .enter() .append("text") .attr("dx", 12) .attr("dy", "0.35em") .attr("visibility", "hidden") .text( d => d.id ); simulation.on("tick", () => { 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); texts .attr("x", d => d.x) .attr("y", d => d.y); }); invalidation.then(() => simulation.stop()); var nodeLinkStatus = {}; links.forEach(d => { nodeLinkStatus[`${d.source.index},${d.target.index}`] = 1; }); function isConnected(a, b) { return nodeLinkStatus[`${a.index},${b.index}`] || nodeLinkStatus[`${b.index},${a.index}`] || a.index === b.index; } const zoom = d3.zoom(); zoom.on("zoom", () => { const { transform } = d3.event; root.attr("transform", transform); }); svg.call(zoom).call(zoom.transform, d3.zoomIdentity); const reset = () => { svg.transition() .duration(750) .call(zoom.transform, d3.zoomIdentity); } var tooltip = d3.select("body") .append("div") .attr("class", "tooltip") .style("position", "absolute") .style("padding", "10px") .style("z-index", "10") .style("width", "400px") .style("height", "150px") .style("background-color", "rgba(230, 242, 255, 0.8)") .style("border-radius", "5px") .style("visibility", "hidden"); function mouseover(d) { focus(d); d3.select(this) .transition() .duration(750) .attr("r", 16); } function mouseout(d) { unfocus(d); d3.select(this) .transition() .duration(750) .attr("r", d => (d.group == "Movie") ? 8 : 5); } function focus(d) { node.style('stroke-opacity', function (o) { var thisOpacity = isConnected(d, o)? 1 : 0.3; this.setAttribute('fill-opacity', thisOpacity); return thisOpacity; }); link.style('opacity', function(l) { return (d === l.source || d === l.target)? 1 : 0.2; }); link.style('stroke-width', function(l) { return (d === l.source || d === l.target) ? 5 : 1; }); texts.filter(o => isConnected(d, o)) .attr("visibility", "visible"); } function unfocus(d) { node.style('stroke-opacity', function (o) { this.setAttribute('fill-opacity', 1); return 1; }); link.style('opacity',1); link.style('stroke-width', 1); texts.attr("visibility", "hidden"); d3.select("#tooltip").remove(); } function clickNode(node) { // update visibility if (node.group == "Movie") { isTooltipHidden = !isTooltipHidden; var visibility = (isTooltipHidden) ? "hidden" : "visible"; // load tooltip content (if it changes based on node) loadTooltipContent(node); // place tooltip where cursor was return tooltip.style("top", (d3.event.pageY -10) + "px").style("left", (d3.event.pageX + 10) + "px").style("visibility", visibility); } else if (!isTooltipHidden) { isTooltipHidden = true; return tooltip.style("top", (d3.event.pageY -10) + "px").style("left", (d3.event.pageX + 10) + "px").style("visibility", "hidden"); } } // reset nodes to not be pinned function unPinNode(node) { node.fx = null; node.fy = null; } // add html content to tooltip function loadTooltipContent(node) { var htmlContent = "

"; htmlContent += "

" + "

" + "<\/div>" htmlContent += "

" + node.id + "<\/a>" htmlContent += "
" htmlContent += "Rank: " + node.rank htmlContent += "
" htmlContent += "Score: " + node.score htmlContent += "
" htmlContent += "Director: " + node.director htmlContent += "
" htmlContent += "Stars: " + node.actor1 + ", " + node.actor2 htmlContent += "<\/div><\/div>" tooltip.html(htmlContent); } return Object.assign(svg.node(), { reset }); }