${o.title}

${svg.node()}

`; svg .attr("width", o.width + "px") .attr("height", o.height + "px") .attr("viewBox", [0, 0, o.width, o.height]) .attr( "style", // "max-width: 100%; height: auto; height: intrinsic; overflow: visible", "overflow: visible" ); const r = d3 .scalePow() .domain([0, d3.max(graph.nodes, o.sizeBy)]) .range([o.nodeSize / 2, o.nodeSize * 2]); graph.nodes.map((d) => (d.r = o.sizeBy(d) ? r(o.sizeBy(d)) : r.range()[0])); const collision = d3.forceCollide((d) => d.r + 2).iterations(4); const simulation = d3 .forceSimulation(graph.nodes) .force( "link", d3 .forceLink(filteredLinks) .id((n) => o.id(n)) .distance(o.linkDistance) .strength(o.linkStrength) ) .force("charge", d3.forceManyBody().strength(o.chargeStrength)); // Accelerate the simulation the first time if (!o.this) { simulation.alpha(3); } else { simulation.alpha(1); } if (o.disjoint) { simulation .force("x", d3.forceX(o.width / 2).strength(o.centerStrength)) .force( "y", d3 .forceY(o.height / 2) .strength((o.centerStrength * 0.7 * width) / o.height) ); } else { simulation.force("center", d3.forceCenter(width / 2, o.height / 2)); } // -------- HULLS --------- const { hull, getHull } = drawHull({ o, svg, graph, filteredClusters }); // -------- LINKS --------- const link = drawLinks({ graph, o, svg, filteredLinks }); // -------- NODES --------- const node = drawNodes({ svg, graph, simulation, o, filteredClusters }); // -------- LABELS --------- const label = createLabels({ svg, _data: graph.nodes.filter( (d) => // d.type !== "Connection" ? d.degree >= o.minDegree : 0 d.type !== "Connection" ), className: "nodeLabel", o }); // ---------- IMAGES --------------- const images = drawImages({ svg, graph, simulation, o }); // --------- Group Labels ------------ const labelDepts = createLabels({ svg, _data: graph.nodes.filter((d) => d.type === "Connection"), className: "connectionLabel", o }); // --------- Tooltips --------------- const hoverOptions = { raise: false, r: r.range()[1], svg }; if (o.tipcontent) hoverOptions.tipcontent = o.tipcontent; const hoverObj = hover(node, invalidation, hoverOptions); function ticked() { link // .transition() // .duration(o.transitionDuration) // .attr("display", simulation.alpha() <= 0.1 ? "block" : "none") .attr("x1", (d) => d.source.x) .attr("y1", (d) => d.source.y) .attr("x2", (d) => d.target.x) .attr("y2", (d) => d.target.y); label .classed("shadow", simulation.alpha() <= 0.1) // .transition() // .duration(o.transitionDuration) .attr("transform", (d) => `translate(${d.x}, ${d.y})`); labelDepts .classed("shadow", simulation.alpha() <= 0.1) // .transition() // .duration(o.transitionDuration) .attr("transform", (d) => `translate(${d.x}, ${d.y})`); node .classed("shadow", simulation.alpha() <= 0.1) // .transition(t) // .duration(o.transitionDuration) .attr("transform", (d) => `translate(${d.x}, ${d.y})`); // .attr("cx", (d) => d.x) // .attr("cy", (d) => d.y) o.useImages && images // .transition() // .duration(o.transitionDuration) // .attr("transform", (d) => `translate(${d.x}, ${d.y})`) .attr("x", (d) => d.x) .attr("y", (d) => d.y); hull.attr("d", getHull); // Update the binary tree for the tooltip; hoverObj.reset(); // collide only at the end of the simulation simulation.force("collide", simulation.alpha() <= 0.5 ? collision : null); } simulation.stop(); simulation.on("tick", ticked); for (let i = 0; i < o.warmUpTicks; i++) { simulation.tick(); } simulation.restart(); // For when no invalidation is passed const _invalidation = o.invalidation || invalidation; _invalidation.then(() => { simulation.stop(); }); ticked(); target.clusters = filteredClusters; return target; }