2f:T950,chart = { let parsedData; try { parsedData = JSON.parse(data); } catch (e) { return 'incorrect data'; } if (!parsedData || !Array.isArray(parsedData.links) || !Array.isArray(parsedData.nodes)) return 'incorrect data'; const links = [...parsedData.links]; const nodes = [...parsedData.nodes]; const simulation = forceSimulation(nodes, links).on("tick", ticked); const svg = d3 .select(DOM.svg(width, height)) .attr("viewBox", [-width / 2, -height / 2, width, height]); svg .append("defs") .append("marker") .attr("id", "arrowHead") .attr("viewBox", "0 0 10 10") .attr("refX", 12) .attr("refY", 5) .attr("orient", "auto") .attr("markerWidth", 6) .attr("markerHeight", 6) .append("svg:path") .attr("d", "M 0 0 L 10 5 L 0 10 z") .attr("fill", "#999") .style("stroke", "none"); const graph = svg.append("g").attr("class", "graph"); var zoom_handler = d3.zoom().on("zoom", zoom_actions.bind(this, graph)); zoom_handler(svg); const link = graph .append("g") .attr("class", "links") .attr("stroke", "#999") .selectAll("line") .data(links) .enter() .append("line") .attr("marker-end", "url(#arrowHead)") .attr("stroke-width", 2); const node = graph .append("g") .attr("class", "nodes") .selectAll(".node") .data(nodes) .enter() .append("g") .attr("class", "node") .call(drag(simulation)); node .append("circle") .attr("r", 5) .attr("fill", d => { switch (d.scope) { case "Singleton": case "Transient": case "Request": return scopeColors[d.scope]; default: return "gray"; } }); node.append("text").text(d => d.name); function ticked() { 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("transform", d => "translate(" + d.x + "," + d.y + ")"); } return svg.node(); }30:Tf22c,viewof data = html`

`31:[{"id":"e6046a3d1186af45293b3e4a4ec3ba83545ce8cf8e00f2f642448a98e2e458d8a1a548efd39fcc48d5e4fd5a6a0937bd413c468aeb5ac75064977545fa5952dc","href":"https://static.observableusercontent.com/files/e6046a3d1186af45293b3e4a4ec3ba83545ce8cf8e00f2f642448a98e2e458d8a1a548efd39fcc48d5e4fd5a6a0937bd413c468aeb5ac75064977545fa5952dc","name":"new2.csv","type":"text/csv","lastModified":1684827950744.873,"size":20866}] 2d:{"title":"Dependencies Graph","cells":[{"id":0,"value":"md`# Dependencies Graph\nReplace the _data_ in _textarea_.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":268,"value":"md`\n## Legeng\n### Scopes:\n

\n ● - Transient scope;\n ● - Singleton scope;\n ● - Request scope.\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"scopeColors = {\n return {\n Transient: 'green',\n Singleton: 'red',\n Request: 'blue',\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"width = 1000","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"height = 580","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"function forceSimulation(nodes, links) {\n return d3.forceSimulation(nodes)\n .force(\"link\", d3.forceLink(links).id(d => d.id).distance(200).strength(0.5))\n .force(\"charge\", d3.forceManyBody().strength(-100*1))\n .force(\"center\", d3.forceCenter());\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"drag = simulation => {\n function dragStarted(d) {\n if (!d3.event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n }\n\n function dragged(d) {\n d.fx = d3.event.x;\n d.fy = d3.event.y;\n }\n\n function dragEnded(d) {\n if (!d3.event.active) simulation.alphaTarget(0);\n\n d.fx = null;\n d.fy = null;\n }\n\n return d3\n .drag()\n .on('start', dragStarted)\n .on('drag', dragged)\n .on('end', dragEnded);\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"zoom_actions = (graph) => {\n graph.attr('transform', d3.event.transform);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"rawdata = FileAttachment(\"new2.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":283,"value":"mydata = {\n return { nodes:\n rawdata.map( ob => ({id:ob.code, name:ob.name.replaceAll('\"',''), \"scope\":\"Transient\"}) )\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":289,"value":"mydata.links = rawdata.filter( x=>x.parentcode != \"NULL\" ).map( ob => ({source:ob.parentcode,target:ob.code}) )","pinned":true,"hidden":false,"mode":"ojs"},{"id":294,"value":"viewof textarea = Inputs.textarea({label: \"Description\", value: JSON.stringify(mydata)})","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}