I'm trying to change the data to update the plot. I can do this manually by changing the .data() with data1 or data2. But I would like to do this by using select input. I added the select input but I am unsure about how to bind it. I'm also not sure if I am on the right track. Please see this REPL.
<script>
import { onMount } from 'svelte';
import * as d3 from 'd3';
var data1 = [30, 86, 168, 281, 303, 365];
var data2 = [281,303, 86, 168, 365]
let el;
let selected = 'data1';
let options = [
'data1',
'data2'
]
onMount(() => {
d3.select(el)
.selectAll("div")
.data(data1)
.enter()
.append("div")
.style("width", function(d) {
return d + "px";
})
.text(function(d) {
return d;
});
});
</script>
<style>
.chart :global(div) {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}
</style>
<select bind:value={selected}>
{#each options as value}<option {value}>{value}</option>{/each}
</select>
<h3>
{selected}
</h3>
<div bind:this={el} class="chart"></div>
<div bind:this={selected} class="chart"></div>
