D3.js JSON parse error

Question

При анализе встроенного объекта JSON с d3.json(obj, function(error, root), его правильная работа, когда я запускаю его локально, но когда я запускаю на сервере 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), поэтому он буквально пытается получить этот объект, но не может, потому что ему это не нужно. Если вы действительно хотите использовать d3.json, вы можете переместить этот объект JSON в свой собственный файл, а затем ссылаться на него, делая d3.json(data.json, function(err, root)).

Результат d3.json будет возвращен - это буквально объект, который вы указали. Вы можете просто присвоить ему имя переменной root.

Связанные вопрос: d3 js - loading json without a http get

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 обработки запроса для этого фильтра, который может помочь вам с настройкой любые дополнительные параметры: