在工作中见过有的人即便使用了Django，依然还在采取json或geojson的文件形式为页面提供数据，相当于嵌入数据而非加载。下面是个简单有效的例子：

先从 model.py 开始

 # models.py

 from django.db import models

 class Play(models.Model):

     name = models.CharField(max_length=100)

     date = models.DateTimeField()

urls.py 建立一个 API 的数据（JSON格式）输出路径，另一个给图像输出页面。

 # 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'),

 ]

views.py

# 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)

下面则是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>

输出结果，大家可以在admin里调整数据。

Django API 为 D3 提供数据的更多相关文章

  1. Django API验证（令牌）

    1. 获取接口信息 Client端 import requests import time import hashlib ctime = time.time() key = 'akfljakfjakl ...

  2. Django API接口FK ManyTo Many 模板

    Url from django.contrib import admin from django.urls import path, re_path from django.urls import i ...

  3. Django API view 登录认证

    文件分类 url from django.contrib import admin from django.urls import path, re_path from django.urls imp ...

  4. 【AMAD】django-formapi -- 一个DJANGO API框架，可使用签名request，可使用form作为API的验证工具

    动机 简介 个人评分 动机 如何快速构建API,使用view就行了? 如果快速构建一个可以验证参数的API,使用django-formapi1吧! 简介 class DivisionCall(call ...

  5. Django api

    http://www.cnblogs.com/wulaoer/p/5276050.html

  6. Django API 自定义状态码

    class BaseResponse(object): def __init__(self): self.code = 1000 self.data = None self.error = None ...

  7. django API返回中文乱码

    renturn HttpResponse(json.dumps(data,ensure_ascii=False))

  8. 初识Django —Python API接口编程入门

    初识Django —Python API接口编程入门 一.WEB架构的简单介绍 Django是什么? Django是一个开放源代码的Web应用框架,由Python写成.我们的目标是用Python语言, ...

  9. 【Django】ESRTful APi

    如何利用rest framework搭建Django API框架!   环境:win10 python3.6 思路步骤: 创建一个可以序列化的类 去数据库取数据交给序列化的类处理 把序列化的数据返回前 ...

随机推荐

  1. js事件循环（event loop）

    我们都知道,js是单线程的,虽然现在有 worker 的存在,但是也只是可以进行运算,并不能操作 dom: js最一开始执行的线程,是主线程,然后主线程执行完毕后,是微队列 microtask 的循环 ...

  2. qemu 出现Could not access KVM kernel module: No such file or directory failed to initialize KVM: No such file or directory

    使用qemu命令 qemu-system-x86_64 -hda image/ubuntu-test.img -cdrom ubuntu-16.04.2-server-amd64.iso -m 102 ...

  3. setInterval 函数

    间隔指定的毫秒数不停地执行指定的代码 setInterval函数参数 codes -- 代码段的字符串表示(与eval函数的参数相同),或者是匿名函数.函数名 interval -- 间隔的毫秒数 s ...

  4. POI 博客总结.....

    主键类: HSSFRow row1= sheet.createRow(1); row.createCell(0).setCellValue("学生编号"); row.createC ...

  5. OC与JS交互前言

    OC与JS交互过程中,可能会需要使用本地image资源及html,css,js文件,这些资源应该如何被加载? 一.WebView加载HTML UIWebView提供了三个方法来加载html资源 1.  ...

  6. 【mysql】mysql 配置

    安装完mysql后, 要及得配置一下 /etc/mysql/my.cnf 配置字符编码为utf8 [client] default-character-set = utf8 [mysqld] defa ...

  7. css 03

    DIV+CSS盒子模型 一.盒子模型css height width padding 内边距 margin  外边距 border 1.margin 外边距 margin-top:15px; marg ...

  8. Miner3D Professional专业版

    ——高级的可视化数据分析为专业人士量身打造 Miner3D Professional 专业版可以帮助工程师,研究人员,分析师,管理人员,知识工作者,以分析师和信息专家,在较短的时间内作出更好的判断.探 ...

  9. Linux命令行环境与桌面环境护切换

    1.前言 在大部分情况下,我们在使用Linux时习惯使用命令行环境,但是有时候也还是会使用到安装桌面环境,所以在这里介绍一下如何给没有安装桌面环境的系统安装桌面环境.以Centos 6.5 为例演示一 ...

  10. fpga 状态机 检测1011序列

    1011 可以使用4个状态:s0,s1,s2,s3. 即:(1)s0有0或1两个状态,当s0位0时,进入s0状态,自身打圈.为1那么进入下个状态s1来检测0. (2)s1有0或1两种情况,s1为1时s ...