从电梯片段中获取d3中的json数据 [英] Get json data in d3 from lift snippet

问题描述

我目前正在使用d3和一个json对象来实现一个数据图。有关此类图表的工作示例，请访问： http://bl.ocks.org/950642 。如果你知道d3，你当然可以直接跳到我的问题部分。

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.

因此，基本上在我的模板中，我需要最小代码：

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>

然后在我的代码片段（ GraphVisual.scala ）我有以下：

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>  

在定义图形的javascript文件（ graph_script ）中，我主要有以下

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
}

我的问题

如果我将json数据存储在一个文件中，如上所示，喜欢生成我的json对象与电梯。所以我想有一个函数返回的图形的电梯中的json对象表示，并使用它的脚本（应该是静态的）。

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).

假设我有以下值定义我的图：

Suppose I have the following value defining my graph:

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

我试图将这个图形定义为d3脚本上面的脚本中的变量：

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

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

$ b <这是很好定义，但我不知道如何访问它 graph_script.js

推荐答案

您可以将json数据检索移动到REST API。

You could move your json data retrieval to REST API.

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

然后你可以使用/ graph url在ajax里面的页面。

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

这篇关于从电梯片段中获取d3中的json数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！