I'm currently working on integrating d3 charts with Vue. I've noticed that using a ref seems to trigger an error, but is that the correct approach?
<template>
<div ref="chart"></div>
</template>
const chart = ref(null);
onMounted(() => {
const chartContainer = d3.select(chart);
const margin = { top: 20, right: 20, bottom: 30, left: 50 };
const width = chartContainer.offsetWidth - margin.left - margin.right;
const height = chartContainer.offsetHeight - margin.top - margin.bottom;
const svg = chartContainer
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",`translate(${margin.left},${margin.top})`);
});
Upon implementation, an error has surfaced:
Uncaught (in promise) TypeError: this.ownerDocument is undefined