从提升片段中获取 d3 中的 json 数据答案

【问题标题】：Get json data in d3 from lift snippet从提升片段中获取 d3 中的 json 数据
【发布时间】：2012-10-09 13:00:14
【问题描述】：

我目前正在使用 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>

然后在我的 sn-p (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 中访问它

【问题讨论】：

标签： javascript scala d3.js lift lift-json

【解决方案1】：

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

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

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

【讨论】：

它有效，我只需要在boot.scala 中添加以下内容：LiftRules.statelessDispatchTable.append(MyGraphApi)
是的，很抱歉忘记了这个-_-

【解决方案2】：

Lukasz 的解决方案，使用 REST API 工作得很好。在我的研究中，我还发现我的问题只是一个 javascript 问题：我不需要使用d3.json(...)。

所以我只需要删除函数d3.json(...) 并将里面的所有内容都放在它外面。然后只需调用mygraph.nodes，而不是json.nodes。

【讨论】：