chart = { const links = data.links.map(d => Object.create(d)); const nodes = data.nodes.map(d => Object.create(d)); const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id)) .force("charge", d3.forceManyBody()) // .force("center", d3.forceCenter(width / 2, height / 2)); //.force("x", d3.forceX()) //.force("y", d3.forceY()); const div = html`

`; const svg = d3.select(div).append("svg") .attr("viewBox", [0, 0, width, height]); const selectedNode = d3.select(div) .append("div") .style("position", "absolute") .style("visibility", "visible") .style("background-color", "white") .style("border", "solid") .style("height","20px") .style("border-width", "1px") .style("top", "20px") .style("border-radius", "5px") .style("width", "300px") .html("Click on node") const linkInfo = d3.select(div) .append("div") .style("position", "absolute") .style("visibility", "visible") .style("background-color", "white") .style("border", "solid") .style("top", "50px") .style("border-width", "1px") .style("border-radius", "5px") .style("width", "200px") .html("") const link = svg.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 = svg.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(nodes) .join("circle") .attr("r", 5) .attr("fill", color) .call(drag(simulation)); svg.call(d3.zoom() .extent([[0, 0], [width, height]]) .scaleExtent([1, 50]) .on("zoom", zoomed)); function zoomed({transform}) { node.attr("transform", transform); link.attr("transform", transform); } node.on("click", function(d, n) { node.attr("fill", color); selectedNode.html(`${n.name}`) d3.select(this) .attr("fill", "black") let incoming = ""; let outgoing = ""; link.attr("stroke", (a,l) => { const actual_link = Object.getPrototypeOf(a); if (actual_link.source === n.id) { outgoing += `

${actual_link.target}

` return "blue"} else if (actual_link.target === n.id){ incoming += `

${actual_link.source}

` return "orange"} else { return "#999"} }); linkInfo.html(`

${outgoing}

${incoming}

`) }); node.append("title") .text(d => d.name); 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); }); invalidation.then(() => simulation.stop()); return div; //return svg.node(); }