From 6fc02a1f3e5f326a520d0dfd71d77d5784272650 Mon Sep 17 00:00:00 2001 From: Mike Lynch Date: Sun, 26 Jan 2025 17:26:17 +1100 Subject: [PATCH] Standalone script generates SVG --- poptimal.js | 42 +++++++++++++++++++++++++++++++------- src/components/download.js | 1 - 2 files changed, 35 insertions(+), 8 deletions(-) diff --git a/poptimal.js b/poptimal.js index 070790d..9ef97d5 100644 --- a/poptimal.js +++ b/poptimal.js @@ -2,17 +2,20 @@ -import * as jsdom from "jsdom"; +import jsdom from "jsdom"; +import * as d3 from "d3"; const { JSDOM } = jsdom; +const xmlns = "http://www.w3.org/2000/xmlns/"; +const xlinkns = "http://www.w3.org/1999/xlink"; +const svgns = "http://www.w3.org/2000/svg"; -const document = new JSDOM().window.document; +const window = new JSDOM().window; +const document = window.document; -import * as d3 from "d3"; - import {RADIUS_OPTS, DotMaker} from './src/components/dots.js'; //import {PALETTES, DotControls} from './src/components/controls.js'; @@ -24,11 +27,29 @@ const HEIGHT = WIDTH; -//d3.select(document.body).append("div"); function poptimal() { + const container = d3.select(document.body).append("div"); - const svg = d3.create("svg") + const dm = new DotMaker(WIDTH); + + const m1 = 2; + const m2 = 3; + const n1 = 4; + const n2 = 5; + const bg = "#ffffff"; + const fg1 = "#ff0000"; + const fg2 = "#000000"; + const f1 = "in"; + const f2 = "noise"; + const r1 = 0.5; + const r2 = 0.19; + + const dots1 = dm.dots(1 / m1, n1); + const dots2 = dm.dots(1 / m2, n2); + + + const svg = container.append("svg") .attr("width", WIDTH * CELL * MAG) .attr("height", HEIGHT * CELL * MAG) .attr("viewBox", [ 0, 0, WIDTH, HEIGHT ]); @@ -61,8 +82,15 @@ function poptimal() { .attr("fill", fg2) .attr("cx", (d) => d.x) .attr("cy", (d) => d.y); + + const node = svg.node(); - console.log(svg); + node.setAttributeNS(xmlns, "xmlns", svgns); + node.setAttributeNS(xmlns, "xmlns:xlink", xlinkns); + const serializer = new window.XMLSerializer; + console.log(serializer.serializeToString(node)); + +// console.log(download_as_svg(svg)); } poptimal(); \ No newline at end of file diff --git a/src/components/download.js b/src/components/download.js index 9089c03..6bee702 100644 --- a/src/components/download.js +++ b/src/components/download.js @@ -61,7 +61,6 @@ export function svg_to_string(svg) { export function download_as_svg(svg) { - console.log("HEY download_as_svg"); const str = svg_to_string(svg); return new Blob([str], {type: "image/svg+xml"}) }