【问题标题】：sending json data from django to d3.js将 json 数据从 django 发送到 d3.js
【发布时间】：2017-09-22 20:35:21
【问题描述】：

我正在尝试将 django 的 views.py 中的查询集传递给 d3.js。

views.py：

定义索引（请求）： qs = DCPOWERSTATS.objects.all().values('TS','PuE').order_by('TS') return render(request, 'dashboard/dash.html', context=qs})

dash.html：

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.chart div {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
             }

</style>
<div class="chart"></div>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var data = {{ data_json }};

var x = d3.scale.linear()
          .domain([0, d3.max(data)])
          .range([0, 420]);

d3.select(".chart")
  .selectAll("div")
  .data(data)
  .enter().append("div")
  .style("width", function(d) { return x(d) + "px"; })
  .text(function(d) { return d; });

 </script>

我需要在 views.py 和 dash.html 中进行更改以创建如下内容： https://bl.ocks.org/mbostock/3885304

所有以前的答案都令人困惑。我需要views.py 和dash.html 的解决方案。我还需要知道将查询集结果发送到 javascript 的完美方式。

谢谢！

【问题讨论】：

标签： python django d3.js data-visualization

【解决方案1】：

您需要将模型转换为普通列表/字典才能将它们转换为 JSON。您决定在查询集上使用values()。还有django serialization。

尽管有序列化，但这里有两个选项。

JSON 返回视图

您可以使用JsonResponse 创建一个直接返回 JSON 数据的视图。

from django.http import JsonResponse

def index(request):
    qs = DCPOWERSTATS.objects.all().values('TS','PuE').order_by('TS')
    # slice the queryset to hit the database and convert into list
    return JsonResponse(qs[:])

您现在可以使用 ajax 调用在客户端加载此数据。

html（使用 jQuery）

// assuming you have registered your view at '/dcpowerstats'
$.ajax({
  url: "http://example.com/dcpowerstats",  
  success: function(data) {
     console.log(data);
  }
});

将 JSON 传递给您的模板

或者您可以使用直接将 JSON 数据渲染到 HTML 模板中。在这种情况下，您应该将序列化数据添加到视图并在那里使用模板标签。

查看

import json
from django.shortcuts import render

def index(request):
    qs = DCPOWERSTATS.objects.all().values('TS','PuE').order_by('TS')
    # slice the queryset to hit the database and convert into list
    context = {'data_json': json.dumps(qs[:])}
    return render(request, 'dashboard/dash.html', context=context)

html

<script>
var data = {{ data_json|safe }};
</script>

选择哪种方式取决于您的前端和偏好。

如果您只需要在您的视图 javascript 中提供一些静态数据，我会选择模板选项。

如果您的前端需要能够动态加载不同的东西并且数据量更大，请选择第二个选项。在这种情况下，我也会考虑使用django rest framework。

【讨论】：

+1 用于模板/django rest 框架。如果您的数据仅流向客户端，则模板很好。但是当你开始不得不接受 PUT、POST 等时，DRF 就是要走的路。
那么，如果我需要动态内容，最好在客户端进行 ajax 调用？
@DataSwede 注意到数据流在这里也有相关性。如果您的数据仅从服务器流向客户端，则模板方法是合适的，但如果您的数据也需要流回，则应考虑 RESTful 方法。
@sach20 使用 DRF，可以轻松序列化/反序列化数据，并管理各种 HTTP 动词。可以向 /product/1/ 发送 GET 以接收产品内容的 json 响应，也可以向 /product/1/ 发送 PUT 以更新该特定产品。如果您只发送 GET 请求，模板将可以工作，但是当您开始有更复杂的来回时，请查看旨在处理它的库。