After creating a graph, I face the issue of keeping it static when new users join the chat. Even though the this.users object gets updated with each new user, the graph remains unchanged. Is there a way to automatically redraw the graph every time a new user is added to this.users?
<template>
<div>
<svg width="290" height="500" class="container-border"></svg>
</div>
</template>
<script>
import * as d3 from "d3";
import { mapState, mapMutations } from "vuex";
export default {
data() {
return {};
},
computed: {
...mapState(["user", "users"]),
},
methods: {
getUser(key) {
let nodes1 = [];
let edges1 = [];
let obj = [{ nodes: nodes1 }, { edges: edges1 }];
const names = Object.values(this.users);
let i = 0;
names.forEach((item) => {
nodes1.push({ name: item.name });
edges1.push({ source: 1, target: i, relation: "", value: 0.5 });
i++;
});
return obj;
},
},
mounted() {
let marge = { top: 5, bottom: 5, left: 5, right: 5 };
let svg = d3.select("svg");
let width = svg.attr("width");
let height = svg.attr("height");
let g = svg
.append("g")
.attr("transform", "translate(" + marge.top + "," + marge.left + ")");
let resultGraph = this.getUser();
let nodes = resultGraph[0].nodes;
let edges = resultGraph[1].edges;
let colorScale = d3
.scaleOrdinal()
.domain(d3.range(nodes.length))
.range(d3.schemeCategory10);
...
},
};
</script>
<style scoped>
</style><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>Your assistance in solving this issue would be greatly appreciated!
Access the full code on CodePen