Получить данные JSON в d3 из фрагмента кода

В настоящее время я реализую график с использованием 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 графа в Lift и использовать его в скрипте (который должен быть статическим).

Что я пробовал

Предположим, у меня есть следующее значение, определяющее мой график:

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

Я попытался определить этот график как переменную в сценарии над сценарием d3:

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

С этим методом у меня есть переменная myGraph который хорошо определен, но я не знаю, как получить к нему доступ в graph_script.js

Источник

2 ответа

Решение

Вы можете переместить ваш JSON-поиск данных в REST API.

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

Затем вы можете ajax вытащить его внутрь страницы, используя /graph url.

Источник

Решение Lukasz, использующее REST API, работает совершенно нормально. Во время моего исследования я также узнал, что моя проблема была просто проблемой JavaScript: мне не нужно было использовать d3.json(...),

Так что я просто должен был удалить функцию d3.json(...) и положи все, что было внутри, снаружи. Тогда просто позвоните mygraph.nodes например вместо json.nodes,

Источник
Другие вопросы по тегам