JUMflot如何重新绘制点/选择项目?尝试将项添加到数组中并在不影响原始项的情况下重新绘制它们

Question

本质上我想做的是有一个按钮。推一行到数组，我想要JUMflot保持重画这些，但不影响线被推入。

我最初做的是有这样的东西(生成器ID是我的按钮和选项被定义，但与我的问题不相关，所以我没有包括它们):

var genVector=[[0,1],[6,6]]; //line being pushed in
var data = [];
$("#generator").click(function(){ 
    data.push({data: genVector, editable: true});
    var p = $.plot($("#graph"),data,options); 
});
$("#graph").bind("datadrop", function(event,pos,item) { 
    data[item.seriesIndex].data[item.dataIndex] = [Math.round(pos.x1),Math.round(pos.y1)];
    p = $.plot($("#graph"), data, options);
};

我意识到最终会发生的是，每次我选择移动点时，我的genVector坐标都会改变。为了解决这个问题，我做了以下操作:

var vectorCounter=0;
var genVector=[[0,1],[6,6]];
var data = [];
var vectorArray=[];
$("#generator").click(function(){
    vectorArray.push(genVector);
    data.push({data: vectorArray[vectorCounter], editable: true});
    vectorCounter++;
    var p = $.plot($("#graph"),data,options);
});
$("#graph").bind("datadrop", function(event,pos,item) { 
    data[item.seriesIndex].data[item.dataIndex] = [Math.round(pos.x1),Math.round(pos.y1)];
    p = $.plot($("#graph"), data, options);
};

我认为将向量添加到一个单独的数组并从那里修改它将使genVector单独存在。但事实并非如此。

我假设这与JUMflot代码的编写方式有关?即使没有，我怎样才能实现我正在做的事情呢?提前感谢!

Answer 1

这与JUMflot无关，而是一个关于对象引用的问题。

push genVector into vectorArray:

vectorArray.push(genVector);

这并不是在vector数组内部创建一个新的数组，而是vectorArray现在保存了一个指向genVector的引用。

所以当你把vectorArray[0]推入data时，你只是得到了对原始genVector的引用。说明了:

> data[0].data[0] = "Mark is Awesome";
  "Mark is Awesome"
> genVector
  ["Mark is Awesome", 
    Array[2]
  ]

整个概念可以更简单地用:

> x = [1,2,3];
  [1, 2, 3]
> y = x
  [1, 2, 3]
> y[0] = "Mark is Awesome"
  "Mark is Awesome"
> x
  ["Mark is Awesome", 2, 3]

那么问题就变成了，如何复制或克隆数组?最简单的是使用切片技巧:

> x = [1,2,3];
  [1, 2, 3]
> y = x.slice(0);
  [1, 2, 3]
> y[0] = "Mark is Awesome"
  "Mark is Awesome"
> x
  [1, 2, 3]

这是一个浅复制，但是，如果数组包含对象引用，它不会克隆它:

> x = [{'a':'b'},2,3];
  [Object, 2, 3]
> y = x.slice(0);
  [Object, 2, 3]
> y[0]['a'] = "Mark is Awesome"
  "Mark is Awesome"
> x
  [Object
     a: "Mark is Awesome"
     __proto__: Object
     , 2, 3]

如果你想克隆所有内容，你需要使用深复制。我就不详细讲了，因为我只是在重复这里精彩的讨论。