2b:null 2c:["$","title",null,{"children":"Граф для задачи №1 ЕГЭ по информатике. | Philippe Rigovanov | Observable"}] 31:T5ae,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(-2000)) .force("center", d3.forceCenter(width / 2, height / 2)); const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const link = svg .append("g") .attr("stroke", "#000") //.attr("stroke", "#999") //.attr("stroke-opacity", 0.6) .selectAll("line") .data(links) .join("line") .attr("stroke-width", 2); //(d) => Math.sqrt(d.value)); const node = svg .append("g") .selectAll(".node") .data(nodes) .join("g") .attr("class", "node") .call(drag(simulation)); node.append("circle").attr("r", 4); //.attr("fill", color); node .append("text") .text(function (d) { return d.id; }) .style("fill", "#000") .style("font-family", "Helvetica,sans-serif") .style("font-size", "24px") .attr("x", 6) .attr("y", 3); 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("transform", (d) => `translate(${d.x}, ${d.y})`); }); invalidation.then(() => simulation.stop()); return svg.node(); }32:[] 2f:{"id":"f5c879475a8296f0","slug":"ege-graph","title":"Граф для задачи №1 ЕГЭ по информатике.","thumbnail":"9c8421cdcf7c12eb88e22a5f4eb7059bef77527ccf852c8a4ff92ded41d14dba","access_level":"public","create_time":"$D2022-12-28T15:31:45.416Z","update_time":"$D2022-12-31T00:57:42.774Z","view_time":null,"first_public_time":"$D2022-12-28T15:31:45.416Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"b5ee25cc13065361","login":"a1ip","name":"Philippe Rigovanov","avatar_url":"https://avatars-next.observableusercontent.com/6359e02dc30dad37dc8aeff508f64823d0f57f42e9b940688bdd1af508bb839c","tier":"starter_2024"},"version":266,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"968f76daa2a26d11","login":"a1ip","name":"Philippe Rigovanov","avatar_url":"https://avatars-next.observableusercontent.com/6359e02dc30dad37dc8aeff508f64823d0f57f42e9b940688bdd1af508bb839c","tier":null}],"members":[{"type":"individual","id":"968f76daa2a26d11","login":"a1ip","name":"Philippe Rigovanov","avatar_url":"https://avatars-next.observableusercontent.com/6359e02dc30dad37dc8aeff508f64823d0f57f42e9b940688bdd1af508bb839c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"f12a3f64915c0078","slug":"informatics","title":"Informatics","owner":{"id":"b5ee25cc13065361","login":"a1ip","name":"Philippe Rigovanov"}},"type":"notebook","body":{"title":"Граф для задачи №1 ЕГЭ по информатике.","cells":[{"id":0,"value":"# Граф для задачи №1 ЕГЭ по информатике.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":132,"value":"nop2`graph {\ngraph [pad=\"0.25,0.25\"\nbgcolor=white];\nnode [shape=point\nwidth=0.2\nfontname=\"Helvetica,Arial,sans-serif\"\nfontsize=40];\nedge [penwidth = 3];\n//O [ xlabel = , pos=\"0,0\", xlp=\"0,0\"];\nA [ xlabel = , pos=\"200,-200\", xlp=\"220,-220\"];\nB [ xlabel = , pos=\"-20,-130\", xlp=\"-40,-110\"];\nC [ xlabel = , pos=\"-240,100\", xlp=\"-270,110\"];\nD [ xlabel = , pos=\"100,100\", xlp=\"80,120\"];\nE [ xlabel = , pos=\"280,200\", xlp=\"310,200\"];\nF [ xlabel = , pos=\"-200,-210\", xlp=\"-230,-210\"];\nG [ xlabel = , pos=\"20,250\", xlp=\"20,280\"];\nA -- D;\nA -- E;\nA -- F;\nB -- D;\nB -- F;\nC -- F;\nC -- G;\nD -- E;\nE -- G;\n}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":97,"value":"Используя layout `nop2` есть возможность корректировать положение `xlabel` параметром `xlp`, вот так:\n\n```\nА [ xlabel = <А>, pos=\"0,0\", xlp=\"-10,0\"];\n```\n\nсм. [здесь](https://stackoverflow.com/questions/30689533/graphviz-graph-positioning-xlabels), А Используя layout `neato` я просто создаю текстовые узлы для позиционирования в них букв с названиями вершин, вот так:\n\n```\nА [pos=\"0,0!\"]; а [label = <А>, pos=\"-.15,0!\", shape=plaintext];\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":58,"value":"neato`graph {\ngraph [pad=\"0.25,0.25\" bgcolor=white];\nnode[shape=point];\nА [pos=\"0,0!\"]; а [label = <А>, pos=\"-.15,0!\", shape=plaintext];\nБ [ xlabel = <Б>, pos=\"1,1.25!\"];\nВ [ xlabel = <В>, pos=\"1.25,.5!\"];\nГ [ xlabel = <Г>, pos=\"1.25,-.5!\"];\nД [ xlabel = <Д>, pos=\"1,-1.25!\"];\nЕ [ xlabel = <Е>, pos=\"2.75,1.25!\"];\nЖ [ xlabel = <Ж>, pos=\"3,0!\"];\nЗ [ xlabel = <З>, pos=\"2.75,-1.25!\"];\nИ [ xlabel = <И>, pos=\"4,0!\"];\nК [ xlabel = <К>, pos=\"4.75,.75!\"];\nЛ [ xlabel = <Л>, pos=\"4.75,-.75!\"];\nМ [ xlabel = <М>, pos=\"5.5,0!\"];\nА -- Б;\nА -- В;\nЕ -- Ж;\nБ -- Е;\nБ -- В;\nВ -- Е;\nВ -- Ж;\nЗ -- Ж;\nА -- Г;\nГ -- Ж;\nА -- Д;\nД -- Г;\nД -- З;\nД -- Ж;\nЕ -- И;\nГ -- В;\nЖ -- И;\nЗ -- И;\nИ -- К;\nК -- М;\nИ -- Л;\nЛ -- М;\nИ -- М;\n}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"data = ({\n nodes: nodes,\n links: links\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":62,"value":"nodes = [\n { id: \"A\" },\n { id: \"B\" },\n { id: \"C\" },\n { id: \"D\" },\n { id: \"E\" },\n { id: \"F\" },\n { id: \"G\" }\n ]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":60,"value":"links = [\n { weight: 1, source: \"A\", target: \"D\" },\n { weight: 1, source: \"A\", target: \"E\" },\n { weight: 1, source: \"A\", target: \"F\" },\n { weight: 1, source: \"B\", target: \"D\" },\n { weight: 1, source: \"B\", target: \"F\" },\n { weight: 1, source: \"C\", target: \"F\" },\n { weight: 1, source: \"C\", target: \"G\" },\n { weight: 1, source: \"D\", target: \"E\" },\n { weight: 1, source: \"E\", target: \"G\" }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"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 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}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":66,"value":"import { neato } from \"@gordonsmith/graphviz\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":129,"value":"import { nop2 } from \"@a1ip/graphviz\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"