diff --git a/webui/src/views/Surface.svelte b/webui/src/views/Surface.svelte index b7940fc..d967ce4 100644 --- a/webui/src/views/Surface.svelte +++ b/webui/src/views/Surface.svelte @@ -51,10 +51,7 @@ const svg = view.append("svg"); - const xScale = d3 - .scaleLinear() - .domain([0, width]) - .range([-1, width + 1]); + const xScale = d3.scaleLinear().domain([0, width]).range([0, width]); const xAxis = d3 .axisBottom(xScale) @@ -62,10 +59,7 @@ .tickSize(height) .tickPadding(5 - height); - const yScale = d3 - .scaleLinear() - .domain([0, height]) - .range([-1, height + 1]); + const yScale = d3.scaleLinear().domain([0, height]).range([0, height]); const yAxis = d3 .axisRight(yScale) @@ -91,10 +85,8 @@ "transform", `translate(${transform.x}px, ${transform.y}px) scale(${transform.k})` ); - points.style("transform-origin", "0 0"); const allPoints = d3.selectAll(".point"); allPoints.style("transform", `scale(${1 / transform.k})`); - allPoints.style("transform-origin", "0 0"); gX.call(xAxis.scale(transform.rescaleX(xScale))); gY.call(yAxis.scale(transform.rescaleY(yScale))); @@ -104,7 +96,7 @@ svg.transition().duration(750).call(zoom.transform, d3.zoomIdentity); } - svg.call(zoom); + d3.select(".view").call(zoom); }); @@ -121,7 +113,9 @@
{#each points as point}
- +
+ +
{/each}
@@ -159,10 +153,22 @@ height: 100%; } + :global(.tick text) { + color: var(--foreground-lightest); + font-size: 1rem; + } + + .points { + transform-origin: 0 0; + } + .point { position: absolute; - top: var(--y); - left: var(--x); + transform-origin: 0 0; + + .inner { + transform: translate(-50%, -50%); + } } }