d3.js: accessing external file in vaadin project

I’m trying to integrate this simple d3.js example (http://bl.ocks.org/mbostock/3750558) into my vaadin project, which uses a JSON file to store the graph nodes and links.

Within my vaadin project the JSON file for some reason can’t be accessed via

d3.json("graph.json", function(error, graph)

(the .js integration works, I’ve displayed a hardcoded graph without problems).
JSON and .js files are in the same folder,
please see the attachment for a detailed view.

Any ideas on how I can access the JSON file? Thanks in advance

Hi Fred,

did you try to acces the JSON file by web browser? I don’t know d3 too much but I assume, the first parameter “graph.json” is the URL to the JSON file. So it is a relative path from X to graph.json. So the file has to be in the absolute path X.

Hello Wolfgang,

Yeah I’ve tried both - to open it in a web browser (js caching disabled) and with an absolute path (C://…), doesn’t work though.

Hi Fred,

if you can’t open it by absolute path (C:..) the file does not exist :wink: But the file system path is not relevant. Because it is JavaScript, the web browser must be able to open it from a relative path of the current script (/VAADIN). So you have to check your web configuration (web.xml?) which files are available public .

Yeah I thought absolute path doesn’t make sense…

Can you elaborate on the public available files? Where do I see them in the web.xml (/WebContent/WEB-INF/web.xml I assume)?

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
      <servlet-name>Vaadind3test2 Application</servlet-name>

Are those the files? How can I add the JSON file to the publicly available files?

Perhaps the same problems like for our project to integrate third party JS libs.