Django - d3.js сообщение без явного запроса?

Question

Я борюсь с набором запросов django, который должен быть передан d3.js для построения графика.
Что я пытаюсь сделать:
- У меня есть форма, которая позволяет пользователю делать конкретные запросы в моей базе данных (это работает очень хорошо).
- Результат этого поиска упорядочен по дате (см. Ниже), но может быть много (от 0 до 20 000). Поэтому я не хочу отображать их в виде списка, но создаю гистограмму.

Проблема: я не знаю, какой был бы лучший способ передачи результатов в d3js, так как я возвращаюсь больше к своему представлению, чем просто к тому, что хочу.

мой views.py:

class QBinnedImages(View): 
     template_name = 'data/query_simple.html' 
     form_class = QueryImages 

     def get(self, request, *args, **kwargs): 
      ### working fine 

     def form_valid(self, form): 
      ### Do some stuff to get the query results 
      context = {"title":"Query Results", "form":form, \ 
         "ndata":len(alldates), "data":JsonResponse(alldates)} 
      return render(self.request, 'data/query_results.html', context) 
    class QueryResults(View): 
     template_name='data/query_results.html' 

The alldates является словарем формы:

{"N": ["20150926T230027", "20150926T230547", "20150926T231106", \ 
      "20150926T233741", "20150926T234301", "20150926T234820", \ 
      "20150926T235339", "20150926T235858", "20150927T000936",]} 

на данный момент мои данные шаблона/query_results.html выглядеть следующим образом:

{% entends 'base.html' %} 

    {% block content %} 
     <div id="blablabla"> 
     <h1> {{ title }} </h1> 

     <p> You queried with the following constrains : </p> 
     {{ form.as_p }} 
     <p> We found {{ ndata }} satisfying your query </p> 
     </div> 
     <div id="plots"> 
      <svg class="bresults"> </svg> 
     </div> 
    <script src="//d3js.org/d3.v3.js" charset="utf-8"></script> 
    <script> 
     // definition of the axis and other small stuff 
     d3.json("{{ data }}", function(error, data) { 
      if (error) return console.warn(error); 
      x.domain([0, d3.max(data, function(d) { return d.value; })]); 
      }); 
     </script> 
     {% endblock content %} 

И ошибка на курсе d3.json. Я действительно понимаю, что d3.json действительно отправляет запросы на поток json ... но я застрял там.

Я надеюсь, что есть достаточно информации здесь, чтобы помочь мне

Thaaaaanks !!!

Answer 1

Так что я нашел способ сделать сюжет. На самом деле передача данных ужасно проста, но ... пока вы не знаете точно, как это невозможно угадать. короче: в шаблоне я просто написал

var data = {{ data | safe }}; 

Но другие изменения должны были быть сделаны в представлениях! Никакой JSON не нужен, если вывод - это примерно список словарей.

в views.py:

alldates = [{'camera':'N', 'days':t[0].isoformat(), \ 
       'counts':c['total_counts']} \ 
        for t, c in zip(times, counts_per_day)] 
    context = {"title":"Query Results", "form":form, \ 
        "ndata":len(alldates), "data":alldates} 
    return render(self.request, 'data/query_results.html', context) 

затем в шаблоне:

var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%S").parse; 
    var data = {{ data | safe}}; 
    data.forEach(function(d) {return d.days=parseDate(d.days);}); 

Я очень помог ответ Мартина Direct data input from Django for a D3 graph

Answer 2

Чтобы передать переменную А Джанго переменной JS вам нужно:

var js_variable = "{{ django_variable }};" 

В вашем случае:

<script> 
    // definition of the axis and other small stuff 
    var data = "{{ data|escapejs }}"; // transfer from django to js 
    d3.json(data, function(error, data) { 
     if (error) return console.warn(error); 
     x.domain([0, d3.max(data, function(d) { return d.value; })]); 
     }); 
</script>