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

首先，确保传入一个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请求处理，可帮助您设置任何其他参数：

Answer 2

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

结果d3.json将返回字面上您声明的对象。您只需将其分配给变量名称root。

相关问题：d3 js - loading json without a http get