sync

src/svgmap/SvgNodes.js

@@ -1,4 +1,4 @@
-import SvgNode from "./SvgNode";
+import SvgNode from "./SvgNode.js";
 
 export default {
 	// sector(r, a0, a1) {
@@ -18,7 +18,10 @@ export default {
     svg(){
         return new SvgNode('svg', {
             version: "1.1",
-            xmlns: "http://www.w3.org/2000/svg"
+            xmlns: "http://www.w3.org/2000/svg",
+			"xml:space":"preserve",
+			"xmlns:xlink": "http://www.w3.org/1999/xlink",
+			style: "shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
             // viewBox: "0 0 2000 2000"
         })
     },
@@ -68,4 +71,21 @@ export default {
 		node.set_attrs({x: 0, y: 0})
 		return node;
 	},
+
+	/**
+	 * 
+	 * @param r0
+	 * @param r1
+	 * @param a0
+	 * @param a1
+	 * @param { [{v, style}] } rings
+	 */
+	 sectored_ring(r0, r1, rings){		
+		let sum = rings.reduce((s,c) => s + c.v, 0)
+		let angs = rings.reduce((s, c, i) => [...s, {...c, a0: i && s[i - 1].a1, a1: c.v + (i && s[i - 1].a1)}], [])
+		let items = angs.map(x => SvgNodes.ring_sector(r0, r1, x.a0 * 360 / sum, x.a1 * 360 / sum).set_style(x.style))
+
+		return SvgNodes.group(items)
+	}
+
 };