D3.js JSON 解析错误

Question

在使用 d3.json(obj, function(error, root) 解析内联 JSON 对象时，当我在本地运行时它工作正常，但是当我运行在 tomcat 服务器我收到 XMLHttpparse 错误。我在网上搜索过。我找到的答案是 CORS。但不清楚如何实现这一目标。你能帮帮我吗？

var obj = {
 "name": "vis",
 "children": [
  {
   "name": "Votes",
   "children": [
    {"name": "200", "size": 200,"url":"1"},
    {"name": "500", "size": 500,"url":"2"},
    {"name": "300", "size": 300,"url":"3"},
    {"name": "400", "size": 400,"url":"4"}
   ]
  },  
  {
   "name": "Reputation", 
   "children": [
    {"name": "200", "size": 200},
    {"name": "500", "size": 500},
    {"name": "300", "size": 300},
    {"name": "400", "size": 400}
   ]
  },
  {
   "name": "Accepted Answer",
   "children": [    
    {
     "name": "encoder",
     "children": [
      {"name": "Accepted Answer", "size": 500}
     ]
    }
   ]
  }
 ]
};
d3.json(obj, function(error, root) {
    alert('error '+error);
    alert('root: '+root);
  if (error) return console.log(error);
}

Answer 1

您误解了 d3.json 的用途。 d3.json 发出实际的 AJAX 请求（因此在文档中将章节命名为 Requests）所以它实际上是在尝试获取该 obj 但不能，因为它不需要.如果你真的想使用 d3.json，你可以将 JSON 对象移动到它自己的文件中，然后通过 d3.json(data.json, function(err, root)) 引用它。

结果 d3.json 将 return 就是您声明的对象。您可以简单地将其分配给变量名 root.

相关问题：

Answer 2

首先，确保将 URL 作为第一个参数传递给 d3.json()。

其次，您需要配置Tomcat以支持CORS。在 7.0.41+ 版本中，Tomcat 包含一个 CORS 过滤器。将过滤器添加到您的 web.xml 文件。

这是您需要的最低配置：

<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
</filter>
<filter-mapping>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

有关更多信息和其他配置选项，请参阅文档：http://tomcat.apache.org/tomcat-7.0-doc/config/filter.html#CORS_Filter

下面是此过滤器的请求处理 flowchart，可以帮助您设置任何其他参数：

D3.js JSON 解析错误

D3.js JSON parse error

javascript

svg

json

d3.js