Currently, I am in the process of transferring d3 graphs from another project to my personal Vue-based project. Most aspects are functioning as expected, except for aligning labels in the arcs of a pie chart using the arc.centroid(d) method. Two errors keep occurring, which I will detail below.
Both my arc function and pie function are within the computed hook.
The method responsible for the labels is located in my methods hook:
pieLabel(width, height, margin) {
d3.select(".pie-chart-wrapper svg")
.append("g")
.attr("class", "pie-chart-labels")
.attr(
"transform",
`translate(${width / 2 + margin},${height / 2 + margin})`
)
.selectAll("text")
.data(this.pie)
.enter()
.append("text")
.style("fill", "black")
.attr("text-anchor", "middle")
.text(d => `${d3.format(",")(d.value)}`)
.each(d => {
const center = this.arc.centroid(d);
d3.select(this)
.attr("x", center[0])
.attr("y", center[1]);
});
}
The persistent errors I encounter are 'this.arc is undefined' and 'this.setAttribute is not a function'.
To resolve these errors, I rearranged some elements and managed to eliminate the error related to this.arc. Upon inspecting 'this', it returned an array of Vue prototypes, indicating that Vue might be attempting to reference a non-existent Vue element causing the issue.
Despite reverting the code structure to its working state outside of Vue, the two errors persist when inside the Vue hook.
This experiment is not tied to any specific project but serves as an exploration of integrating Vue with d3.js functionality.