我正在尝试使用 d3 放大我的图表。
我在我的方法中有:
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})`
);
在我的模板中:<div id="app">
<svg id="chart" viewBox="0 0 500 500"></svg>
</div>
所以基本上,我试过这个: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})`);
还有很多其他的事情,但我每次都有这个错误[Vue warn]: Error in mounted hook: "TypeError: d3__WEBPACK_IMPORTED_MODULE_0__.behavior is undefined"
我想知道是否有人知道为什么这不起作用,我该怎么做才能解决我的问题。
最佳答案
要修复错误,我们可以这样做
this.chart = d3.select("#chart")
.call(d3.zoom().on("zoom", this.test2))
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`)
test2(d) {
this.chart.attr("transform", d.transform)
},
问题是因为我使用的是 D3 V6。使用 theV5,d3.event.translate 将起作用(Michael Rovinsky 的回应)
关于javascript - 如何在 vuejs 中使用 D3 缩放图表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67280201/