|
|
|
@ -1,62 +1,47 @@
|
|
|
|
|
<script>
|
|
|
|
|
// TODO this example needs updating
|
|
|
|
|
import { onMount } from 'svelte';
|
|
|
|
|
import { scaleLinear } from 'd3-scale';
|
|
|
|
|
|
|
|
|
|
export let svg;
|
|
|
|
|
|
|
|
|
|
const xScale = scaleLinear();
|
|
|
|
|
const yScale = scaleLinear();
|
|
|
|
|
|
|
|
|
|
export let width = 500;
|
|
|
|
|
export let height = 200;
|
|
|
|
|
export let padding = { top: 20, right: 40, bottom: 40, left: 25 };
|
|
|
|
|
export let points;
|
|
|
|
|
export let xTicks = [0, 4, 8, 12, 16, 20];
|
|
|
|
|
export let yTicks = [0, 2, 4, 6, 8, 10, 12];
|
|
|
|
|
|
|
|
|
|
function xTicks() {
|
|
|
|
|
return width > 180 ?
|
|
|
|
|
[0, 4, 8, 12, 16, 20] :
|
|
|
|
|
[0, 10, 20];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function yTicks() {
|
|
|
|
|
return height > 180 ?
|
|
|
|
|
[0, 2, 4, 6, 8, 10, 12] :
|
|
|
|
|
[0, 4, 8, 12];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function xScale() {
|
|
|
|
|
return xScale()
|
|
|
|
|
.domain([0, 20])
|
|
|
|
|
.range([padding.left, width - padding.right]);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function yScale() {
|
|
|
|
|
return yScale()
|
|
|
|
|
.domain([0, 12])
|
|
|
|
|
.range([height - padding.bottom, padding.top]);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onMount(() => {
|
|
|
|
|
resize();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const padding = { top: 20, right: 40, bottom: 40, left: 25 };
|
|
|
|
|
|
|
|
|
|
let xScale;
|
|
|
|
|
$: xScale = scaleLinear()
|
|
|
|
|
.domain([0, 20])
|
|
|
|
|
.range([padding.left, width - padding.right]);
|
|
|
|
|
let yScale;
|
|
|
|
|
$: yScale = scaleLinear()
|
|
|
|
|
.domain([0, 12])
|
|
|
|
|
.range([height - padding.bottom, padding.top]);
|
|
|
|
|
|
|
|
|
|
let width = 500;
|
|
|
|
|
let height = 200;
|
|
|
|
|
let xTicks;
|
|
|
|
|
$: xTicks = width > 180 ?
|
|
|
|
|
[0, 4, 8, 12, 16, 20] :
|
|
|
|
|
[0, 10, 20];
|
|
|
|
|
let yTicks;
|
|
|
|
|
$: yTicks = height > 180 ?
|
|
|
|
|
[0, 2, 4, 6, 8, 10, 12] :
|
|
|
|
|
[0, 4, 8, 12];
|
|
|
|
|
|
|
|
|
|
onMount(resize);
|
|
|
|
|
|
|
|
|
|
let svg;
|
|
|
|
|
function resize() {
|
|
|
|
|
const { width, height } = svg.getBoundingClientRect();
|
|
|
|
|
width = width, height = height;
|
|
|
|
|
({ width, height } = svg.getBoundingClientRect());
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<svelte:window on:resize='{resize}'/>
|
|
|
|
|
|
|
|
|
|
<svg ref:svg>
|
|
|
|
|
<svg bind:this={svg}>
|
|
|
|
|
<!-- y axis -->
|
|
|
|
|
<g class='axis y-axis'>
|
|
|
|
|
{#each yTicks as tick}
|
|
|
|
|
<g class='tick tick-{tick}' transform='translate(0, {yScale()(tick)})'>
|
|
|
|
|
<line x1='{padding.left}' x2='{xScale()(22)}'/>
|
|
|
|
|
<g class='tick tick-{tick}' transform='translate(0, {yScale(tick)})'>
|
|
|
|
|
<line x1='{padding.left}' x2='{xScale(22)}'/>
|
|
|
|
|
<text x='{padding.left - 8}' y='+4'>{tick}</text>
|
|
|
|
|
</g>
|
|
|
|
|
{/each}
|
|
|
|
@ -65,8 +50,8 @@
|
|
|
|
|
<!-- x axis -->
|
|
|
|
|
<g class='axis x-axis'>
|
|
|
|
|
{#each xTicks as tick}
|
|
|
|
|
<g class='tick' transform='translate({xScale()(tick)},0)'>
|
|
|
|
|
<line y1='{yScale()(0)}' y2='{yScale()(13)}'/>
|
|
|
|
|
<g class='tick' transform='translate({xScale(tick)},0)'>
|
|
|
|
|
<line y1='{yScale(0)}' y2='{yScale(13)}'/>
|
|
|
|
|
<text y='{height - padding.bottom + 16}'>{tick}</text>
|
|
|
|
|
</g>
|
|
|
|
|
{/each}
|
|
|
|
@ -74,7 +59,7 @@
|
|
|
|
|
|
|
|
|
|
<!-- data -->
|
|
|
|
|
{#each points as point}
|
|
|
|
|
<circle cx='{xScale()(point.x)}' cy='{yScale()(point.y)}' r='5'/>
|
|
|
|
|
<circle cx='{xScale(point.x)}' cy='{yScale(point.y)}' r='5'/>
|
|
|
|
|
{/each}
|
|
|
|
|
</svg>
|
|
|
|
|
|
|
|
|
|