I am in the process of developing a Chart.vue component using D3. My goal is to have the ability to add multiple instances of this component to a single page while ensuring that each instance remains separate.
In my attempt to achieve this, I decided to assign a unique ID generated with uuid to the div surrounding my component in the template:
<template>
<div :id=this.id>
<svg></svg>
</div>
</template>
The ID is dynamically created when the component is initialized.
<script>
import * as d3 from "d3";
import { v4 as uuidv4 } from "uuid";
export default {
...
created () {
this.id = uuidv4()
},
...
Whenever there is an update to the data passed in as props from the parent component App.vue, the chart is re-rendered. To pinpoint the specific <svg> element associated with each instance of the Chart component, I leverage the unique this.id in my renderChart method:
methods: {
renderChart(chart_data) {
const svg_width = 1000;
const svg_height = 600;
const svg = d3
.select("#" + this.id)
.select("svg")
.attr("width", svg_width)
.attr("height", svg_height);
...
This is followed by the addition of axes, data, and other necessary components.
Upon adding two instances of the Chart component to my App.vue template:
<template>
<div id="app">
<form action="#" @submit.prevent="getIssues">
<div class="form-group">
<input
type="text"
placeholder="owner/repo Name"
v-model="repository"
class="col-md-2 col-md-offset-5"
>
</div>
</form>
<Chart :issues="issues" />
<Chart :issues="issues" />
</div>
</template>
Both instances are appended to the DOM with distinct uuid values. However, during the execution of the renderChart function after updating the data, only one chart is visible instead of two.
As someone new to JavaScript, Vue, and D3, I may be approaching this incorrectly. It appears as though my approach should work, but any guidance would be greatly appreciated.