为什么 HTML 按钮不能与调用的 [函数] 一起使用？

Question

在这个JS代码中，我用d3库和Vue框架做了一个折线图。折线图遵循两个数据集 data1 和 data2。我已经通过在方法中返回HTML文件（参见xyz（）函数）使html文件可以访问createSvg（）属性。但是当我单击输出中显示的按钮时，图形不会更改，这意味着按钮不起作用。我的代码中有什么错误？请给我一些建议。var app = new Vue({  el: "#app",    data(){    },methods:{  xyz:function(data){    return this.createSvg  }},computed:{createSvg(){  var data1 = [   {ser1: 0.3, ser2: 4},   {ser1: 2, ser2: 16},   {ser1: 3, ser2: 8}];  var data2 = [     {ser1: 1, ser2: 7},     {ser1: 4, ser2: 1},     {ser1: 6, ser2: 8}  ];// set the dimensions and margins of the graphvar margin = {top: 10, right: 30, bottom: 30, left: 50},    width = 460 - margin.left - margin.right,    height = 400 - margin.top - margin.bottom;// append the svg object to the body of the pagevar svg = d3.select("#my_dataviz")  .append("svg")    .attr("width", width + margin.left + margin.right)    .attr("height", height + margin.top + margin.bottom)    .attr("fill", "blue")  .append("g")    .attr("transform",          "translate(" + margin.left + "," + margin.top + ")");// Initialise a X axis:var x = d3.scaleLinear().range([0,width]);var xAxis = d3.axisBottom().scale(x);svg.append("g")  .attr("transform", "translate(0," + height + ")")  .attr("class","myXaxis")// Initialize an Y axisvar y = d3.scaleLinear().range([height, 0]);var yAxis = d3.axisLeft().scale(y);svg.append("g")  .attr("class","myYaxis")// Create a function that takes a dataset as input and update the plot:function update(data) {  // Create the X axis:  x.domain([0, d3.max(data, function(d) { return d.ser1 }) ]);  svg.selectAll(".myXaxis").transition()    .duration(3000)    .call(xAxis);  // create the Y axis  y.domain([0, d3.max(data, function(d) { return d.ser2  }) ]);  svg.selectAll(".myYaxis")    .transition()    .duration(3000)    .call(yAxis);  // Create a update selection: bind to the new data  var u = svg.selectAll(".lineTest")    .data([data], function(d){ return d.ser1 });};

Answer 1

要回答您的问题，您的按钮无法访问，因为它不在其范围内。只有 中的内容才能访问 。一种选择是将函数取出，但由于依赖于多个变量，因此您需要使变量成为全局变量或同时传递它们。updatecreateSvgupdateupdateupdate

顺便说一句，我认为你错误地使用了Vue，从你提供的代码来看，它没有做任何有益的事情，即 不会因为您尚未定义任何 .createSvgdata

我在下面包含了一个工作片段，它以预期的方式使用 Vue。我强烈建议您阅读文档。

var app = new Vue({

  el: "#app",

  data: () => {

    return {

      data1: [{

          ser1: 0.3,

          ser2: 4

        },

        {

          ser1: 2,

          ser2: 16

        },

        {

          ser1: 3,

          ser2: 8

        }

      ],

      data2: [{

          ser1: 1,

          ser2: 7

        },

        {

          ser1: 4,

          ser2: 1

        },

        {

          ser1: 6,

          ser2: 8

        }

      ],

      margin: {

        top: 10,

        right: 30,

        bottom: 30,

        left: 50

      },

      width: null,

      height: null

    }

  },

  mounted() {

    this.width = 460 - this.margin.left - this.margin.right;

    this.height = 400 - this.margin.top - this.margin.bottom;

    

    this.createSvg();

  },

  methods: {

    createSvg() {

      var svg = d3.select("#my_dataviz")

        .append("svg")

        .attr("width", this.width + this.margin.left + this.margin.right)

        .attr("height", this.height + this.margin.top + this.margin.bottom)

        .attr("fill", "blue")

        .append("g")

        .attr("transform",

          "translate(" + this.margin.left + "," + this.margin.top + ")");

      var x = d3.scaleLinear().range([0, this.width]);

      var xAxis = d3.axisBottom().scale(x);

      svg.append("g")

        .attr("transform", "translate(0," + this.height + ")")

        .attr("class", "myXaxis")

      var y = d3.scaleLinear().range([this.height, 0]);

      var yAxis = d3.axisLeft().scale(y);

      svg.append("g")

        .attr("class", "myYaxis");

      this.update(svg, x, y, xAxis, yAxis, this.data1)

    },

    updateData(data) {

      var svg = d3.select("#my_dataviz");

      var x = d3.scaleLinear().range([0, this.width]);

      var xAxis = d3.axisBottom().scale(x);

      var y = d3.scaleLinear().range([this.height, 0]);

      var yAxis = d3.axisLeft().scale(y);

      this.update(svg, x, y, xAxis, yAxis, data);

    },

    update(svg, x, y, xAxis, yAxis, data) {

      // Create the X axis:

      x.domain([0, d3.max(data, function(d) {

        return d.ser1

      })]);

      svg.selectAll(".myXaxis").transition()

        .duration(3000)

        .call(xAxis);

      // create the Y axis

      y.domain([0, d3.max(data, function(d) {

        return d.ser2

      })]);

      svg.selectAll(".myYaxis")

        .transition()

        .duration(3000)

        .call(yAxis);

      // Create a update selection: bind to the new data

      var u = svg.selectAll(".lineTest")

        .data([data], function(d) {

          return d.ser1

        });

      // Updata the line

      u

        .enter()

        .append("path")

        .attr("class", "lineTest")

        .merge(u)

        .transition()

        .duration(3000)

        .attr("d", d3.line()

          .x(function(d) {

            return x(d.ser1);

          })

          .y(function(d) {

            return y(d.ser2);

          }))

        .attr("fill", "none")

        .attr("stroke", "steelblue")

        .attr("stroke-width", 2.5)

    }

  }

});

<!DOCTYPE html>

<meta charset="utf-8">

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script src="https://d3js.org/d3.v4.js"></script>

<div id="app">

  <button @click="updateData(data1)">Dataset 1</button>

  <button @click="updateData(data2)">Dataset 2</button>

  <div id="my_dataviz"></div>

</div>

Answer 2

您是否将代码包装在id的包装器中，#app我看不到它