在工作中见过有的人即便使用了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. c++11 多线程入门教程（一）

    原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/10945309.html 最近在找c++服务端开发的实习(大佬们有推荐吗QAQ..),恰好写了一 ...

  2. web 单例 多例

    单例多例需要搞明白两个问题:1. 什么是单例多例:2. 如何产生单例多例:3. 为什么要用单例多例4. 什么时候用单例,什么时候用多例:1. 什么是单例多例:所谓单例就是所有的请求都用一个对象来处理, ...

  3. jquery调用asp.net 页面后台的实现代码

    先创建一个aspx页面编写一个客户端控件<input type="button" id="AjaxDemo" value="AjaxDemo&q ...

  4. 【转】Linq 语法

    Join操作符 适用场景:在我们表关系中有一对一关系,一对多关系,多对多关系等.对各个表之间的关系,就用这些实现对多个表的操作. 说明:在Join操作中,分别为Join(Join查询), Select ...

  5. servlet传值到servlet传值问题

    今天在项目中遇到一个问题:中期项目自己做的新闻部分NewsPagerSortservlet传值时,正确答案如下 if(title!=""){ resp.sendRedirect(& ...

  6. Ajax 使用 FormData做为data的参数时 出现Illegal invocation

    今天在用ajax向后台传递数据时出现此错误,在ajax的参数中加上 contentType: false, processData: false, 这两句即可.

  7. 逐步解读String类（一）

    一句题外话 面试刚入行的Java新手,侧重基础知识:面试有多年工作经验的老鸟,多侧重对具体问题的解决策略. 从一类面试题说起 考察刚入行菜鸟对基础知识的掌握程度,面试官提出关于String类的内容挺常 ...

  8. DataGridView控件使用大全

    转自:http://www.cnblogs.com/xiaofengfeng/archive/2011/04/16/2018504.html DataGridView控件 DataGridView是用 ...

  9. 使用NIO快速复制Java文件

    package com.test.test; import java.io.File;import java.io.FileInputStream;import java.io.FileOutputS ...

  10. sql server 2016新特性 查询存储（Query Store）的性能影响

    前段时间给客户处理性能问题,遇到一个新问题, 客户的架构用的是 alwayson ,并且硬件用的是4路96核心,内存1T ,全固态闪存盘,sql server 2016 . 问题  描述 客户经常出现 ...