3e:null 3f:["$","title",null,{"children":"How to append external SVG | Erdal Yildiz | Observable"}] 45:T669,chart = { const width = 400; const height = 400; const svg = d3.create("svg").attr("width", width).attr("height", height); const gridData = d3.range(9); const x = d3.scaleLinear().domain(d3.extent(gridData)).range([0, width]); const y = d3.scaleLinear().domain(d3.extent(gridData)).range([0, height]); const gridG = svg .append("g") .attr("stroke", "#000") .attr("stroke-dasharray", "4,4") .attr("stroke-opacity", 0.2); gridG .selectAll("line.x") .data(gridData) .join("line") .classed("x", true) .attr("x1", 0) .attr("y1", y) .attr("x2", width) .attr("y2", y); gridG .selectAll("line.y") .data(gridData) .join("line") .classed("y", true) .attr("x1", x) .attr("y1", 0) .attr("x2", x) .attr("y2", height); const g = svg .append("g") .attr("transform", `translate(${width / 2}, ${height / 2})`); // clone svg const clonedExternalSvg = d3.select(externalSvg).clone(true); // remove svg's attributes clonedExternalSvg.attr("viewBox", null); clonedExternalSvg.attr("width", null); clonedExternalSvg.attr("height", null); // append cloned svg node g.node().appendChild(clonedExternalSvg.node()); // clone svg const clonedFourSvg = d3.select(fourSVG).clone(true); // remove svg's attributes clonedFourSvg.attr("viewBox", null); clonedFourSvg.attr("width", null); clonedFourSvg.attr("height", null); // append cloned svg node g.node().appendChild(clonedFourSvg.node()); // call function svg.append("g").call(appendSVG, externalSvg); svg.append("g").call(appendSVG, fourSVG); return svg.node(); }46:[] 43:{"id":"09da6f1dffebc102","slug":null,"title":"How to append external SVG","thumbnail":"c1115a31a3cc4b70b777c4552497c94a35ac5273e6e30b2f062976c7329ef518","access_level":"public","create_time":"$D2024-01-10T18:27:47.154Z","update_time":"$D2024-01-10T18:27:47.154Z","view_time":null,"first_public_time":"$D2024-01-10T18:27:47.154Z","has_unpublished_edits":null,"fork":{"id":"2f58e142146ce339","slug":"how-to-append-external-svg","title":"How to append external SVG","owner":{"id":"50d6555a7b3f1d85","login":"sugi2000lab","name":"Network Design Studio, TMU | すぎもと組"}},"stars":0,"starred":false,"owner":{"type":"team","id":"bc9d499f43377845","login":"e7dal","name":"Erdal Yildiz","avatar_url":"https://avatars-next.observableusercontent.com/670c9fd8a6479e76dc2cfc136e0bb53f964c9f8a4f426830000dd0ec9de6bde5","tier":"starter_2024","bio":"","following":false},"version":108,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cb34c9480fb07813","login":"e7dal","name":"Erdal Yildiz","avatar_url":"https://avatars-next.observableusercontent.com/670c9fd8a6479e76dc2cfc136e0bb53f964c9f8a4f426830000dd0ec9de6bde5","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"cb34c9480fb07813","login":"e7dal","name":"Erdal Yildiz","avatar_url":"https://avatars-next.observableusercontent.com/670c9fd8a6479e76dc2cfc136e0bb53f964c9f8a4f426830000dd0ec9de6bde5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"How to append external SVG","cells":[{"id":0,"value":"# How to append external SVG\n\nImport function\n~~~js\nimport {appendSVG} from \"@sugi2000lab/how-to-append-external-svg\"\n~~~\n\nExample:\n~~~js\nsvg.append(\"g\").call(appendSVG, svg);\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"appendSVG = (selection, svg) => {\n // clone svg\n const clonedSvg = d3.select(svg).clone(true);\n // remove svg's attributes\n clonedSvg.attr(\"viewBox\", null);\n clonedSvg.attr(\"width\", null);\n clonedSvg.attr(\"height\", null);\n // append cloned svg node\n selection.node().appendChild(clonedSvg.node());\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"fourSVG = svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"externalSvg = svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body"