Get json data in d3 from lift snippet

Question

I am currently implementing a graph using d3 and a json object for data. A working example of such a graph can be found here: http://bl.ocks.org/950642. If you know d3 you can certainly directly jump to the My Problem part.

Quick overview of code

So, basically in my template I have the minimum code necessary:

<div id="main" class="lift:surround?with=default;at=content">
  <div class="lift:GraphVisual.showGraph"></div>
</div>

Then in my snippet (GraphVisual.scala) I have the following:

def showGraph = {
  <h3>Bachelor 5/6 - Communication Systems</h3> ++
  <div id="graph-container" width="500px" height="100px">
    <script type="text/javascript" src="static/scripts/graph_script.js></script>
  </div>  

In the javascript file defining the graph (graph_script) I mainly have the following

var vis = d3.select("#graph-container").append("svg:svg")

d3.json("static/scripts/jsonData.json", function(json) {
  //Do stuff
}

My Problem

If I store my json data in a file, as shown above, everything works fine. Now I would like to generate my json object with lift. So I would like to have a function returning the json object representation of the graph in Lift and to use it in the script (which should be static).

What I tried

Suppose I have the following value defining my graph:

val graph = JObject(JField("nodes", JArray(List(...))), JField("links", JArray(List)))

I tried to define this graph as a variable in a script above the d3 script:

<script>{JsCrVar("myGraph", graph).toJsCmd}</script>

With this method I have the variable myGraph which is well defined but I don't know how to access it in graph_script.js

Answer 1

You could move your json data retrieval to REST API.

object MyGraphApi extends RestHelper {
   serve {
     case Req("graph" :: Nil, _, GetRequest)  => {
       JsonResponse(myGraphObject)
     }
   }
}

Then you can ajax pull it inside page using /graph url.

Answer 2

The solution of Lukasz, using the REST API works totally fine. During my research I also found out that my problem was just a javascript issue: I didn't need to use d3.json(...).

So I just had to remove the function d3.json(...) and put all that was inside outside of it. Then just call mygraph.nodes for example instead of json.nodes.