为什么 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 graph

var 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 page

var 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 axis

var 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({&nbsp; el: "#app",&nbsp; data: () => {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; data1: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ser1: 0.3,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ser2: 4&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ser1: 2,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ser2: 16&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ser1: 3,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ser2: 8&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; data2: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ser1: 1,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ser2: 7&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ser1: 4,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ser2: 1&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ser1: 6,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ser2: 8&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; margin: {&nbsp; &nbsp; &nbsp; &nbsp; top: 10,&nbsp; &nbsp; &nbsp; &nbsp; right: 30,&nbsp; &nbsp; &nbsp; &nbsp; bottom: 30,&nbsp; &nbsp; &nbsp; &nbsp; left: 50&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; width: null,&nbsp; &nbsp; &nbsp; height: null&nbsp; &nbsp; }&nbsp; },&nbsp; mounted() {&nbsp; &nbsp; this.width = 460 - this.margin.left - this.margin.right;&nbsp; &nbsp; this.height = 400 - this.margin.top - this.margin.bottom;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; this.createSvg();&nbsp; },&nbsp; methods: {&nbsp; &nbsp; createSvg() {&nbsp; &nbsp; &nbsp; var svg = d3.select("#my_dataviz")&nbsp; &nbsp; &nbsp; &nbsp; .append("svg")&nbsp; &nbsp; &nbsp; &nbsp; .attr("width", this.width + this.margin.left + this.margin.right)&nbsp; &nbsp; &nbsp; &nbsp; .attr("height", this.height + this.margin.top + this.margin.bottom)&nbsp; &nbsp; &nbsp; &nbsp; .attr("fill", "blue")&nbsp; &nbsp; &nbsp; &nbsp; .append("g")&nbsp; &nbsp; &nbsp; &nbsp; .attr("transform",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "translate(" + this.margin.left + "," + this.margin.top + ")");&nbsp; &nbsp; &nbsp; var x = d3.scaleLinear().range([0, this.width]);&nbsp; &nbsp; &nbsp; var xAxis = d3.axisBottom().scale(x);&nbsp; &nbsp; &nbsp; svg.append("g")&nbsp; &nbsp; &nbsp; &nbsp; .attr("transform", "translate(0," + this.height + ")")&nbsp; &nbsp; &nbsp; &nbsp; .attr("class", "myXaxis")&nbsp; &nbsp; &nbsp; var y = d3.scaleLinear().range([this.height, 0]);&nbsp; &nbsp; &nbsp; var yAxis = d3.axisLeft().scale(y);&nbsp; &nbsp; &nbsp; svg.append("g")&nbsp; &nbsp; &nbsp; &nbsp; .attr("class", "myYaxis");&nbsp; &nbsp; &nbsp; this.update(svg, x, y, xAxis, yAxis, this.data1)&nbsp; &nbsp; },&nbsp; &nbsp; updateData(data) {&nbsp; &nbsp; &nbsp; var svg = d3.select("#my_dataviz");&nbsp; &nbsp; &nbsp; var x = d3.scaleLinear().range([0, this.width]);&nbsp; &nbsp; &nbsp; var xAxis = d3.axisBottom().scale(x);&nbsp; &nbsp; &nbsp; var y = d3.scaleLinear().range([this.height, 0]);&nbsp; &nbsp; &nbsp; var yAxis = d3.axisLeft().scale(y);&nbsp; &nbsp; &nbsp; this.update(svg, x, y, xAxis, yAxis, data);&nbsp; &nbsp; },&nbsp; &nbsp; update(svg, x, y, xAxis, yAxis, data) {&nbsp; &nbsp; &nbsp; // Create the X axis:&nbsp; &nbsp; &nbsp; x.domain([0, d3.max(data, function(d) {&nbsp; &nbsp; &nbsp; &nbsp; return d.ser1&nbsp; &nbsp; &nbsp; })]);&nbsp; &nbsp; &nbsp; svg.selectAll(".myXaxis").transition()&nbsp; &nbsp; &nbsp; &nbsp; .duration(3000)&nbsp; &nbsp; &nbsp; &nbsp; .call(xAxis);&nbsp; &nbsp; &nbsp; // create the Y axis&nbsp; &nbsp; &nbsp; y.domain([0, d3.max(data, function(d) {&nbsp; &nbsp; &nbsp; &nbsp; return d.ser2&nbsp; &nbsp; &nbsp; })]);&nbsp; &nbsp; &nbsp; svg.selectAll(".myYaxis")&nbsp; &nbsp; &nbsp; &nbsp; .transition()&nbsp; &nbsp; &nbsp; &nbsp; .duration(3000)&nbsp; &nbsp; &nbsp; &nbsp; .call(yAxis);&nbsp; &nbsp; &nbsp; // Create a update selection: bind to the new data&nbsp; &nbsp; &nbsp; var u = svg.selectAll(".lineTest")&nbsp; &nbsp; &nbsp; &nbsp; .data([data], function(d) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return d.ser1&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; // Updata the line&nbsp; &nbsp; &nbsp; u&nbsp; &nbsp; &nbsp; &nbsp; .enter()&nbsp; &nbsp; &nbsp; &nbsp; .append("path")&nbsp; &nbsp; &nbsp; &nbsp; .attr("class", "lineTest")&nbsp; &nbsp; &nbsp; &nbsp; .merge(u)&nbsp; &nbsp; &nbsp; &nbsp; .transition()&nbsp; &nbsp; &nbsp; &nbsp; .duration(3000)&nbsp; &nbsp; &nbsp; &nbsp; .attr("d", d3.line()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .x(function(d) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return x(d.ser1);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .y(function(d) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return y(d.ser2);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }))&nbsp; &nbsp; &nbsp; &nbsp; .attr("fill", "none")&nbsp; &nbsp; &nbsp; &nbsp; .attr("stroke", "steelblue")&nbsp; &nbsp; &nbsp; &nbsp; .attr("stroke-width", 2.5)&nbsp; &nbsp; }&nbsp; }});<!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">&nbsp; <button @click="updateData(data1)">Dataset 1</button>&nbsp; <button @click="updateData(data2)">Dataset 2</button>&nbsp; <div id="my_dataviz"></div></div>

Answer 2

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