JavaScript 对象随机改变？

Question

<script>
var jsonObject;
d3.json("d3ready.json", function(error, data) {
  if (error) return console.warn(error);
  jsonObject = data;
  var data1 = createGraph(0,4,data);
  draw(data1);
});
</script>
<script>
function onsubmit1(){
  console.log("jsonObject is " + JSON.stringify(jsonObject));
  console.log();
  var data1 = createGraph(parseInt($("#min")[0].value, 10),parseInt($("#max")[0].value, 10),jsonObject);
  draw(data1);
};

我在createGraph中记录了JSON.stringify(data)，这是数据

"{"nodes":[{"name":"102.23.56.54","group":5},{"name":"14.89.156.255","group":5},{"name":"54.89.156.255","group":5},{"name":"194.66.82.11","group":5},{"name":"94.6.82.111","group":5},{"name":"77.99.88.66","group":5},{"name":"4.90.49.255","group":5},{"name":"Client0","group":0},{"name":"Client1","group":0},{"name":"Client2","group":0},{"name":"Client3","group":0},{"name":"Client4","group":0},{"name":"Client5","group":0},{"name":"Client6","group":0},{"name":"Client7","group":0},{"name":"Client8","group":0}],"links":[{"source":0,"target":7,"event_time":1},{"source":1,"target":8,"event_time":3}]}"

这是 onsubmit() 中的第一行，即 jsonObject

"{"nodes":[{"name":"102.23.56.54","group":5,"index":0,"weight":1,"x":299.94526826471133,"y":277.7841744491975,"px":299.9327761798027,"py":277.7772499258768},{"name":"14.89.156.255","group":5,"index":2,"weight":1,"x":277.75596186872986,"y":200.05253033301608,"px":277.7489723293299,"py":200.06505833142455},{"name":"54.89.156.255","group":5},{"name":"194.66.82.11","group":5},{"name":"94.6.82.111","group":5},{"name":"77.99.88.66","group":5},{"name":"4.90.49.255","group":5},{"name":"Client0","group":0,"index":1,"weight":1,"x":200.08265242701665,"y":222.19732778914582,"px":200.09529372175797,"py":222.20415356195323},{"name":"Client1","group":0,"index":3,"weight":1,"x":222.26526337005697,"y":299.96860427614854,"px":222.2723662415275,"py":299.9561891107354},{"name":"Client2","group":0},{"name":"Client3","group":0},{"name":"Client4","group":0},{"name":"Client5","group":0},{"name":"Client6","group":0},{"name":"Client7","group":0},{"name":"Client8","group":0}],"links":[{"source":0,"target":7,"event_time":1},{"source":1,"target":8,"event_time":3}]}"

data 和 jsonObject 之间存在巨大差异，但我定义了 jsonObject =data。如果您能帮助我找出原因，我将不胜感激？

谢谢，如果您想查看上下文，这里是 plunkr link

Answer 1

这是因为您正在使用传入的数据对象的节点对象填充 createGraph 函数中的新图形对象 (graph1)。

换句话说，您并不是将节点对象深度复制到新的图形对象中，您只是从 createGraph.js 复制以下代码中的对象引用。这个新创建的图对象被d3修改，d3又修改了原始数据集中的节点对象。

graph1.nodes.push(graph.nodes[graph.links[i].source]);

如果您希望原始数据对象保持不变，请修改以下行

var data1 = createGraph(0,4,data);

进入

var data1 = createGraph(0,4, JSON.parse(JSON.stringify(data)));

您不应该再看到原始对象中的数据更改。那么这里发生了什么？ JSON.parse(JSON.stringify(data)) 是深度复制对象的肮脏解决方法。这将创建数据对象的完全重复的副本。