javascript - 从 lift snippet 中获取 d3 中的 json 数据

Question

我目前正在使用 d3 和数据的 json 对象实现一个图表。可以在此处找到此类图表的工作示例: http://bl.ocks.org/950642 。如果您了解 d3，您当然可以直接跳到我的问题部分。

代码快速概述

所以，基本上在我的模板中我有最少的必要代码:

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

然后在我的代码片段 (GraphVisual.scala) 中，我有以下内容:

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)中，我主要有以下内容

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

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

我的问题

如果我将 json 数据存储在文件中，如上所示，一切正常。现在我想用 lift 生成我的 json 对象。所以我想要一个函数返回 Lift 中图形的 json 对象表示形式，并在脚本中使用它(应该是静态的)。

我尝试了什么

假设我有以下值定义我的图表:

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

我尝试将此图定义为 d3 脚本上方脚本中的变量:

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

通过此方法，我拥有定义良好的变量 myGraph，但我不知道如何在 graph_script.js 中访问它

Answer 1

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

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

然后你可以使用/graph url ajax 将其拉入页面内。