在工作中见过有的人即便使用了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. jstl core and jstl fn

    jstl标签使用时必须加taglib:<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core&quo ...

  2. PHPGGC学习----理论

    本文首发于先知:https://xz.aliyun.com/t/5450 PHPGGC 是一款能够自动生成主流框架的序列化测试payload的工具,类似 Java 中的 ysoserial, 当前支持 ...

  3. webpack 3 优化

    编译时间太长 项目为多页面应用时,编译的时候每个入口都会读取依赖的路径,所以入口越多,会导致编译越慢 公用库提取 除了公用的框架(如 Vue.React)以外,不同页面所需要的第三方库可能不一样,而且 ...

  4. SQL语句中的having和where的区别

    --首先,两个都是用来进行筛选的: --区别在于 1.当分组筛选的时候使用having eg: 在emp中,查出最低工资小于1000的部门号 select deptno from emp group ...

  5. MATLAB之易经卜卦程序+GUI

    MATLAB之易经卜卦程序+GUI   日月为易,刚柔相推. 是故易有太极,是生两仪,两仪生四象,四象生八卦,八卦定吉凶,吉凶生大业.是故法象莫大乎天地,变通莫大乎四时,悬象著明莫大乎日月.   本文 ...

  6. Apache Spark 2.2.0 中文文档 - Structured Streaming 编程指南 | ApacheCN

    Structured Streaming 编程指南 概述 快速示例 Programming Model (编程模型) 基本概念 处理 Event-time 和延迟数据 容错语义 API 使用 Data ...

  7. Python学习笔记-day1（if流程控制)

    在python中,流程控制语句为强制缩进(4空格) if username=='lmc' and password=='123456': print('Welcome User {name} logi ...

  8. 不该被忽视的CoreJava细节(一)

    一.系列文章导言 <不该被忽视的CoreJava细节>系列文章将会持续更新.我希望自己通过这一系列文章的写作,能与读者一起进步,逐步完善对Java体系结构的了解. 二.本期关注点 几乎翻看 ...

  9. PHP:is_string()字符串函数

    is_string() is_string() - 检测变量是否是字符串. 描述:bool is_string( mixed $var ) 如果var是sring则返回TRUE,否则返回FALSE.m ...

  10. Android（java）学习笔记75：ListViewProject案例（ListView + BaseAdapter + CheckBox）

    这个案例可能稍微复杂一点,我会讲述详细一点: 1. 首先是AndroidManifest.xml: <?xml version="1.0" encoding="ut ...