如何在 vuejs 中使用 D3 缩放图表？

大佬教程收集整理的这篇文章主要介绍了如何在 vuejs 中使用 D3 缩放图表？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决如何在 vuejs 中使用 D3 缩放图表？？

我正在尝试使用 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",${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)
},