I want to incorporate zoom functionality into my d3 chart.
Here is the code snippet from my methods :
this.chart = d3.select("#chart")
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
this.x = d3.scaleLinear()
.range([0, width - margin.left - margin.right]);
this.y = d3.scaleLinear()
.range([height - margin.top - margin.bottom, 0]);
this.xAxis = this.chart.append("g")
.attr(
"transform",
`translate(0, ${height - margin.top - margin.bottom})`
);
And in my template :
<div id="app">
<svg id="chart" viewBox="0 0 500 500"></svg>
</div>
During implementation, I tried this approach:
testZoom() {
this.chart.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")")
},
this.chart = d3.select("#chart")
.call(d3.behavior.zoom().on("zoom", this.testZoom))
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
Despite trying various approaches, I kept encountering this error message:
[Vue warn]: Error in mounted hook: "TypeError: d3__WEBPACK_IMPORTED_MODULE_0__.behavior is undefined"
I am seeking insights on why this issue persists and how I can resolve it.