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().strength(-charge))
.force("x", d3.forceX())
.force("y", d3.forceY());
const svg = d3
.create("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height])
.style("font", "12px sans-serif");
svg
.append("defs")
.selectAll("marker")
.data(nodes.map((n) => n.id))
.join("marker")
.attr("id", (d) => `arrow-${d}`)
.attr("viewBox", "0 -5 10 10")
.attr("refX", 15)
.attr("refY", -2)
.attr("markerWidth", 10)
.attr("markerHeight", 10)
.attr("orient", "auto")
.append("path")
.attr("fill", "grey")
.attr("d", "M0,-5L10,0L0,5");
const link = svg
.append("g")
.attr("fill", "none")
.attr("stroke-width", 1.5)
.selectAll("path")
.data(links)
.join("path")
.attr("stroke", (d) => skillColor(d.Label));
link
.attr("stroke-width", 2)
.attr(
"marker-end",
(d) => `url(${new URL(`#arrow-${d.source.id}`, location)})`
);
// const nodeDefs = svg.append("defs").attr("id", "imgdefs");
// const imgpattern = nodeDefs
// .append("pattern")
// .attr("id", "imgpattern")
// .attr("height", 1)
// .attr("width", 1)
// .attr("x", "0")
// .attr("y", "0");
// imgpattern
// .append("image")
// .attr("x", 0)
// .attr("y", 0)
// .attr("height", 40)
// .attr("width", 40)
// .attr(
// "xlink:href",
// "https://cdn.lorem.space/images/face/.cache/150x150/daniil-lobachev-u3pi6HhSYew-unsplash.jpg"
// );
const node = svg
.append("g")
.attr("fill", "currentColor")
.attr("stroke-linecap", "round")
.attr("stroke-linejoin", "round")
.selectAll("g")
.data(nodes)
.attr("id", (d) => `g${d.index}`)
.join("g")
.call(drag(simulation));
node
.append("circle")
.attr("stroke", "white")
.attr("stroke-width", 1)
.attr("r", 20)
// .attr("fill", (d) => "url(#imgpattern)")
.attr("stroke-width", (d) => (d.nodeWeight + 2) / 2);
// .attr("fill", (d) => nodeColor(d.id));
// .attr("stroke-width", (d) => (d.nodeWeight + 2) / 2)
// .attr("fill", )
node
.append("text")
.attr("x", 20)
.attr("y", "0.31em")
.text((d) => d.id)
.clone(true)
.lower()
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-width", 3);
node
.append("image")
.attr('xlink:href', d=>d.img)
.attr("height", 25)
.attr("width", 25)
.attr("transform", "translate(-13,-13)")
.style("border-radius", 5);
// svg.selectAll("g.node").style({"border-radius": "50%"});
simulation.on("tick", () => {
link.attr("d", linkArc);
node.attr("transform", (d) => `translate(${d.x},${d.y})`);
});
invalidation.then(() => simulation.stop());
return svg.node();
}