Question

我有一个小项目，涉及与Django Webapp连接的Postgresql数据库中的数据收集。我想使用D3.js可视化我的数据。我尝试改编两个DateField以从数据库提取我的数据，并将其作为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}}]"

运行脚本时，出现D3错误，表明eachFor不是函数。数据的类型是字符串而不是对象。但是我通过JsonResponse处理它，并将其序列化为Django查询中的JSON对象。你有办法解决吗？

Answer 1

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

import json as js

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

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

1 个答案: