json - django가 d3에 데이터를 전달 - d3 eachfor는 함수가 아닙니다

Django Webapp에 연결된 Postgresql 데이터베이스의 데이터 수집을 다루는 작은 프로젝트가 있습니다. D3.js를 사용하여 데이터를 시각화하고 싶습니다. 두 개의 DateFields를 조정하여 db에서 데이터를 추출하고 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)

내 URL :

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로 처리하고 장고 쿼리의 JSON 객체로 직렬화합니다. 그 문제를 해결하는 방법을 알고 있습니까?