Javascript 当向servlet发送另一个XMLHTTPRequest时，D3.js图冻结_Javascript_Servlets_D3.js

Javascript 当向servlet发送另一个XMLHTTPRequest时，D3.js图冻结

javascript servlets d3.js

Javascript 当向servlet发送另一个XMLHTTPRequest时，D3.js图冻结,javascript,servlets,d3.js,Javascript,Servlets,D3.js,我在D3.js中生成的节点有问题。我有一个查看力定向图的HTML文件，还有一个简单的Java servlet，通过XMLHttpPrequest从浏览器接收Get请求。当我在文本区域中插入任何内容并单击HTML页面上的“Find”按钮时，我向Servlet发送一个XMLHttpRequest，并获得一个数据，该数据表示为D3.js中的一个节点。它工作正常。当我再次单击“查找”按钮时，文本区域中有相同的文本或其他文本，生成的节点不再移动。这是我的密码： HTML代码： <html> &

我在

D3.js

中生成的节点有问题。我有一个查看力定向图的

HTML

文件，还有一个简单的

Java servlet

，通过

XMLHttpPrequest

从浏览器接收

Get

请求。当我在文本区域中插入任何内容并单击

HTML

页面上的“Find”按钮时，我向Servlet发送一个

XMLHttpRequest

，并获得一个数据，该数据表示为

D3.js

中的一个节点。它工作正常。当我再次单击“查找”按钮时，文本区域中有相同的文本或其他文本，生成的节点不再移动。这是我的密码：

HTML代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>

.node {
stroke: #fff;
stroke-width: 1.5px;
}

.link {
stroke: #999;
stroke-opacity: .6;
}

</style>
<title>Insert title here</title>
</head>
<body>

<input type="text" id="find" size="20"/>
<button type="button" onclick='find();'> Find Tutorials </button></br>

<script src="http://d3js.org/d3.v3.js"></script>
<script language="JavaScript" type="text/JavaScript"></script>

<script>
var xmlHTTPRequest = new XMLHttpRequest();
var obj;
var array = new Array();

var color = d3.scale.category20();

var width = 960,
height = 500;

 var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);

var force = d3.layout.force()
.charge(-120)
.linkDistance(30)
.size([width, height]);

function process()
{
if (xmlHTTPRequest.readyState == 4 && xmlHTTPRequest.status == 200)
{
    obj = JSON.parse(xmlHTTPRequest.responseText);  
array.push(obj);
init();
}
}

function init()
{
  force
  .nodes(array)
  .start();

   var node = svg.selectAll(".node")
  .data(array)
  .enter().append("circle")
  .attr("class", "node")
  .attr("r", 5)
  .style("fill", function(d) { return 1; })
  .call(force.drag);

   node.append("title")
  .text(function(d) { return d.name; });

  force.on("tick", function() {
  node.attr("cx", function(d) { return d.x; })
  .attr("cy", function(d) { return d.y; });
 });
}

function find()
{
xmlHTTPRequest.open("GET", "/SampleServlet/MyServlet?find=" + document.getElementById("findAuthor").value, true);
xmlHTTPRequest.onreadystatechange = process;
xmlHTTPRequest.send(null);
}

</script>
</body>
</html>

请任何人帮助我解决并找到发送另一个XMLHttpRequest时此节点未移动的原因。提前感谢您的帮助

这是因为您将XMLHttpRequest设置为全局对象，并使用

var

定义它：

<script>
var xmlHTTPRequest = new XMLHttpRequest();

或者（更好的选择）使用类似于Ajax调用的框架，而不是直接使用XMLHttpRequest。出于几个原因，这是一个更好的选择，包括您应该检查浏览器兼容性，并对不同的浏览器使用不同的方法，例如：

if (window.XMLHttpRequest)
{
    req = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
    req = new ActiveXObject("Microsoft.XMLHTTP");
}

框架将为您完成这些工作。

谢谢您的帮助。我在find函数中定义了该请求。不幸的是，它说有一个错误，因为没有定义XMLHTTPRequest。看来我必须加上“var”。你认为我不应该创建两个不同的函数来完成请求吗？顺便说一下，谢谢你建议我使用JQuery选项。我已经开始使用它了。每次Ajax调用，我都会在浏览器上得到一个节点。我现在的问题是，当我进行三次调用时，第一个和第二个节点不移动，但刚刚生成的第三个节点可以移动。我不知道为什么。

function find()
{
  req = new XMLHttpRequest();
  ...

if (window.XMLHttpRequest)
{
    req = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
    req = new ActiveXObject("Microsoft.XMLHTTP");
}