I'm currently experimenting with creating a simple code using vue.js and d3.js. The goal is to plot some charts within the code, so I am attempting to allocate space for the charts by defining a method('add_svg') and executing the method in the created hook.
However, the method('add_svg') is not producing the desired outcome. To troubleshoot, I confirmed that the method was functioning correctly by including a console.log('Running') at the beginning of the method.
While I could see the message 'Running', the svg_space I intended to insert was not being added.
Interestingly, when I UPDATE charts using the same method in the computed hook, it works flawlessly. It seems to generate the necessary spaces multiple times in the computed hook, indicating that the method itself is functioning properly.
Why does this discrepancy exist?
Below is an excerpt from my code:
// CONSOLE.LOG DISPLAYS 'RUNNING' BUT SVG NOT APPENDED
created () {
console.log("")
this.add_svg() // append svg for chart
this.plot([0, 0]) // basic plot with value = [0, 0]
},
...
// SAME METHOD YIELDS DESIRED RESULT WHEN RUN HERE.
// INITIALLY, I PREFER TO EXECUTE THE METHOD WITHIN created HOOK, NOT IN COMPUTED.
computed () {
this.add_svg()
this.plot(datum)
}
...
methods: {
add_svg: function () {
console.log("Adding some space for chart")
d3.select('.chart_test2')
.append('svg')
.attr('class', 'svg_chart_test2')
.attr('width', '10px')
.attr('height', '10px')
},
other methods...
}