2

現在、データに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データをファイルに保存すると、すべて正常に機能します。次に、リフトを使用して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

4

2 に答える 2

2

jsonデータの取得をRESTAPIに移動できます。

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

次に、/graphurlを使用してページ内でajaxプルできます。

于 2012-10-11T07:52:51.563 に答える
0

REST APIを使用したLukaszのソリューションは、まったく問題なく機能します。調査中に、自分の問題が単なるjavascriptの問題であることがわかりました。を使用する必要はありませんでしたd3.json(...)。

そのため、関数を削除して、関数d3.json(...)の内側にあるものをすべて配置する必要がありました。mygraph.nodes次に、たとえばの代わりに呼び出しますjson.nodes。

于 2012-10-13T13:40:50.237 に答える