"+"

"+ ""+ ""+ innerTableContent + "" + "

"+ "

"; }).style("left", (d3.event.pageX + 15) + "px") .style("top", (d3.event.pageY - 200) + "px"); }; let mouseout = () => { Tooltip.transition() .duration(duration) .style("opacity", 0); }; let drag = function (simulation) { function dragstarted(d) { isDragging = true; if (!d3.event.active) simulation.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; isDragging = false; } return d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); }; // Building svg let svg = selection .selectAll('svg') .data([data]) .enter() .append('svg') .attr("width", chartWidth) .attr("height", chartHeight) .style("cursor","move"); svg = svg.merge(svg); let g = svg.append("g") .attr("transform", `translate(${width / 2}, ${height / 2})`); let link = g.append("g") .attr("fill", "none") .attr("stroke", "#666") .attr("stroke-width", "1.5px") .selectAll("path") .data(links) .join("path"); let node = g.append("g") .attr("stroke", "red") .style("cursor", "pointer") .selectAll("circle") .data(nodes) .join("circle") .attr("fill", d => d.children ? "#fff" : "#000") .attr("stroke", d => d.children ? null : "red") .attr("stroke-width", d => d.children ? 1 : 2) .attr("r", d => d.children ? 6 : 3) .on("mouseover", mouseover) .on("mouseout", mouseout) .call(drag(simulation)); simulation.on("tick", () => { link.attr("d", function (d) { var dx = d.target.x - d.source.x, dy = d.target.y - d.source.y, dr = Math.sqrt(dx * dx + dy * dy); return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 1 0,1 " + d.target.x + "," + d.target.y; }); node .attr("cx", d => d.x) .attr("cy", d => d.y); }); //add zoom capabilities let zoomHandler = d3.zoom() .on("zoom",zoomAction); //Zoom functions function zoomAction(){ g.attr("transform", `translate(${width / 2+ d3.event.transform.x}, ${height / 2+ d3.event.transform.y })`+ "scale(" + d3.event.transform.k + ")"); } zoomHandler(svg); } chart.width = function (_) { return arguments.length ? ((width = _) , chart) : width; }; chart.height = function (_) { return arguments.length ? ((height = _) , chart) : height; }; chart.margin = function (_) { return arguments.length ? ((margin = _) , chart) : margin; }; return chart; }