将数据从Django传递到D3

我想用Django和D3.js编写一个非常基本的条形图。我有一个名为date的日期时间字段叫做play的对象。我想要做的是显示按月份分组的时间段数。基本上，我有两个问题：将数据从Django传递到D3

我如何获得这些分组通过一个月的播放次数的计数当月
什么是摆脱Django的这一信息纳入由D3使用的东西的最佳方式。

现在我已经看了看这里的一些其他的答案，并试图

json = (Play.objects.all().extra(select={'month': "extract(month FROM date)"}) 
.values('month').annotate(count_items=Count('date')))

这得到接近我想要trhe信息，但是当我尝试在模板输出它弄出来，如下（含Ls）在月末。这意味着显然它不是有效的js（没有qoutes），并且我也不是真的想要Ls到最后。

模板：

<script> 
     var test ={{ json|safe }}; 
     alert("test"); 

    </script>

输出：

var test = [{'count_items': 10, 'month': 1L}, {'count_items': 5, 'month': 2L}];

我自己也尝试在这个数据json.dumps，但我得到告诉这不是有效的JSON。这让我觉得在Django中应该更直截了当，所以我可能会完全走向蠕虫路径。

来源

2014-10-19 Matt shannon

您使用的是Django 1.7吗？我已经为您定制了一个解决方案，只是为了验证我们使用的是相同的版本。 – 2014-10-19 21:31:05

1.4.1我们说话时升级，然后我会试试你的答案。 – 2014-10-19 21:53:50

好的。这是因为[django.http.JsonResponse]（https://docs.djangoproject.com/zh/dev/ref/request-response/#jsonresponse-objects）是在1.7版本中引入的。 – 2014-10-19 21:58:06

因为D3.js v3有很好的收集methods to load data from external resources¹，所以最好不要将数据嵌入到您的页面中，您只需加载它。

这将是一个例子的答案。

让我们先从一个模型定义：

# models.py 
from django.db import models 


class Play(models.Model): 
    name = models.CharField(max_length=100) 
    date = models.DateTimeField()

URL配置：

# urls.py 
from django.conf.urls import url 


from .views import graph, play_count_by_month 

urlpatterns = [ 
    url(r'^$', graph), 
    url(r'^api/play_count_by_month', play_count_by_month, name='play_count_by_month'), 
]

我们使用两个网址，一个返回HTML（查看），以及其他URL（图play_count_by_month）作为一个API只返回数据为JSON。

最后我们的观点：

# views.py 
from django.db import connections 
from django.db.models import Count 
from django.http import JsonResponse 
from django.shortcuts import render 

from .models import Play 


def graph(request): 
    return render(request, 'graph/graph.html') 


def play_count_by_month(request): 
    data = Play.objects.all() \ 
     .extra(select={'month': connections[Play.objects.db].ops.date_trunc_sql('month', 'date')}) \ 
     .values('month') \ 
     .annotate(count_items=Count('id')) 
    return JsonResponse(list(data), safe=False)

在这里，我们定义的视图来回报广大的数据作为JSON，请注意，我改变了额外的是数据库无关的，因为我做了测试，使用SQLite。

，并遵循我们的graph/graph.html模板，显示每月播放次数的图表：

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

body { 
    font: 10px sans-serif; 
} 

.axis path, 
.axis line { 
    fill: none; 
    stroke: #000; 
    shape-rendering: crispEdges; 
} 

.x.axis path { 
    display: none; 
} 

.line { 
    fill: none; 
    stroke: steelblue; 
    stroke-width: 1.5px; 
} 

</style> 
<body> 
<script src="http://d3js.org/d3.v3.js"></script> 
<script> 

var margin = {top: 20, right: 20, bottom: 30, left: 50}, 
    width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 

var parseDate = d3.time.format("%Y-%m-%d").parse; // for dates like "2014-01-01" 
//var parseDate = d3.time.format("%Y-%m-%dT00:00:00Z").parse; // for dates like "2014-01-01T00:00:00Z" 

var x = d3.time.scale() 
    .range([0, width]); 

var y = d3.scale.linear() 
    .range([height, 0]); 

var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom"); 

var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient("left"); 

var line = d3.svg.line() 
    .x(function(d) { return x(d.month); }) 
    .y(function(d) { return y(d.count_items); }); 

var svg = d3.select("body").append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

d3.json("{% url "play_count_by_month" %}", function(error, data) { 
    data.forEach(function(d) { 
    d.month = parseDate(d.month); 
    d.count_items = +d.count_items; 
    }); 

    x.domain(d3.extent(data, function(d) { return d.month; })); 
    y.domain(d3.extent(data, function(d) { return d.count_items; })); 

    svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis); 

    svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis) 
    .append("text") 
     .attr("transform", "rotate(-90)") 
     .attr("y", 6) 
     .attr("dy", ".71em") 
     .style("text-anchor", "end") 
     .text("Play count"); 

    svg.append("path") 
     .datum(data) 
     .attr("class", "line") 
     .attr("d", line); 
}); 

</script> 
</body> 
</html>

这将返回一个不错的图形像这样（随机数据）： Graph of Play counts by month

更新1： D3 v4将移动代码以将外部数据加载到专用库，请参阅d3-request。 更新2：为了提供帮助，我已将所有文件放在一个示例项目中，在github上：github.com/fgmacedo/django-d3-example

来源

2014-10-19 21:50:44

嗯，所以我尝试把所有这些放在一起，我得到的是图的左侧部分（没有行或标签）。这里是我的play_count_by_month页面输出的样子： '[{“count_items”：10，“month”：“2013-01-01T00：00：00Z”}，{“count_items”：5，“month”：“ 2013-02-01T00：00：00Z“}]' 我没有在网络端看到任何JS错误或任何问题（看起来好像让请求正常） – 2014-10-20 00:08:57

日期格式有问题。 'play_count_by_month'的结果如下：'[{“count_items”：731，“month”：“2014-01-01”}，{“count_items”：404，“month”：“2014-02-01” }]'。您可以尝试将graph.html上的'parseDate'函数更改为：'var parseDate = d3.time.format（“％Y-％m-％dT00：00：00Z”）。parse;' – 2014-10-20 00:33:40

工作正常！非常感谢。 – 2014-10-20 05:36:19

将数据从Django传递到D3

回答

相关问题