时间戳

首页 > 解决方案 > Django 将数据传递给 D3 - D3。eachFor 不是函数

json - Django 将数据传递给 D3 - D3。eachFor 不是函数

问题描述

我有一个小项目，涵盖连接到 Django Webapp 的 Postgresql 数据库中的数据集合。我想使用 D3.js 可视化我的数据。我尝试调整两个 DateFields 从数据库中提取我的数据并将其作为 JSON 文件提供给 D3。

console.log 显示来自 JSON 的正确值，但我无法访问数据。显然，我的数据是作为字符串而不是 JSON 对象传递的。你知道为什么会这样吗？

我的看法：

from django.http import JsonResponse
from django.shortcuts import render
from django.core import serializers

from .models import Sonde
from .forms import date_choice


def index(request):
    latest_Measurement = Sonde.objects.order_by('-Date')[:3]

    form = date_choice   

    if request.method == 'POST':
        form = date_choice(request.POST)
        startDate = request.POST.get("start")
        endDate = request.POST.get("end")
        print(startDate)
        subsetData = Sonde.objects.filter(Date__range=(startDate,endDate))
        request.session['subsetData'] = serializers.serialize('json',subsetData)        
    else:
        form = date_choice()

    context = {
            'latest_Measurement': latest_Measurement,
            'form': form,
            }

    return render(request,'visDat/index.html',context)



def renderData(request):
    subsetData = request.session.get('subsetData')
    return JsonResponse(subsetData,safe=False)

我的网址：

from django.urls import path
from django.conf.urls import url

from . import views

#app_name = 'visDat'

urlpatterns = [
    path('', views.index, name='index'),
    url(r'^api/renderData',views.renderData, name='renderData'),
]

我的 index.html 模板：

<form action="" method="POST">
{% csrf_token %}
<table>
{{ form }}
</table>
<input type="submit" value="Submit" />
</form>

<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-%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.Date); })
    .y(function(d) { return y(d.Temperature); });

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 "renderData" %}", function(error, data){

    console.log(data);

    data.forEach(function(d) {
        d.Date = parseTime(d.Date);
        d.Temperature =+ d.Temperature;
    });


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

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

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);

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

});

</script>

如果我手动调用 renderData API，则会返回以下 JSON：

"[{\"model\": \"visDat.sonde\", \"pk\": 1, \"fields\": {\"Serial\": \"256599\", \"Date\": \"2018-06-26\", \"Temperature\": 12.56, \"Pressure\": 12.35}}, {\"model\": \"visDat.sonde\", \"pk\": 2, \"fields\": {\"Serial\": \"2565599\", \"Date\": \"2018-06-26\", \"Temperature\": 4.5, \"Pressure\": 100.3}}]"

当我运行脚本时，我得到了 eachFor 不是函数的 D3 错误。数据的类型是字符串而不是对象。但我通过 JsonResponse 处理它并将其序列化为来自 Django Query 的 JSON 对象。你知道如何解决这个问题吗？

标签： jsondjangod3.js

解决方案

我的 JSON 返回没有返回 JSON，而是返回一个字符串。因此，我将其重新编码为 JSON：

import json as js

def renderData(request):
    subsetData = request.session.get('subsetData')
    return JsonResponse(js.loads(subsetData),safe=False)

推荐阅读