Question

我正在努力将django查询集传递给d3.js进行绘图。
我想做什么：
- 我有一个表单，允许用户在我的数据库中进行特定的查询（这工作得很好） - 该搜索的结果全部按日期排序（更多信息如下），但可能很多（介于0到20 000之间）。因此，我不想将它们显示为列表，而是制作条形图。

问题：我不知道将结果转移到d3js的最佳方法是什么，因为我会更多地返回到我的视图而不仅仅是我要绘制的内容。

my 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'

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

要将Django的变量传递给您需要的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>

Answer 2

所以我找到了制作情节的方法。实际上传递数据非常简单，但是......只要你不确切知道如何，不可能猜到。简而言之：在我刚写的模板中

    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

的答案给了我很大的帮助

Django - 没有明确请求的d3.js通信？

2 个答案: