d3 tsv没有使用django

时间:2017-02-13 04:25:06

标签: javascript python django d3.js

我知道这个问题被多次询问,但我的问题似乎是独一无二的:

enter image description here

我的django观点:

def data(request):
    event = Event.objects.get(pk=request.GET.get('epk'))
    occurrences = event.occurrences.all()

    response = HttpResponse(content_type='text/tsv')
    response['Content-Disposition'] = 'filename="data.tsv"'

    response.write('date\tclose\n')
    for occ in occurrences:
        response.write('%s\t%s\n' % (occ.timestamp.strftime('%Y-%m-%d %H:%M:%S'), occ.counter))

    return response

和js:

<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
    var svg = d3.select("svg"),
        margin = {top: 20, right: 20, bottom: 30, left: 50},
        width = +svg.attr("width") - margin.left - margin.right,
        height = +svg.attr("height") - margin.top - margin.bottom,
        g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var parseTime = d3.timeParse("%Y-%m-%d %H:%M:%S");

    var x = d3.scaleTime().rangeRound([0, width]);

    var y = d3.scaleLinear().rangeRound([height, 0]);

    var line = d3.line().x(function (d) {
        return x(d.date);
    }).y(function (d) {
        return y(d.close);
    });

    d3.tsv("{% url 'data' %}?epk={{ event.id }}", function (d) {
        d.date = parseTime(d.date);
        d.close = +d.close;
        return d;
    }, function (error, data) {

        console.log(data); // ----> the screenshot at the bottom

        if (error) throw error;

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

        g.append("g")
            .attr("transform", "translate(0," + 1 + ")")
            .call(d3.axisBottom(x)) // <---- error place
            .select(".domain")
            .remove();

        g.append("g")
            .call(d3.axisLeft(y))
            .append("text")
            .attr("fill", "#000")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", "0.71em")
            .attr("text-anchor", "end")
            .text("Occurs");

        g.append("path")
            .datum(data)
            .attr("fill", "none")
            .attr("stroke", "steelblue")
            .attr("stroke-linejoin", "round")
            .attr("stroke-linecap", "round")
            .attr("stroke-width", 1.5)
            .attr("d", line);
    });
</script>

我从django视图中获取的tsv文件的内容是:

date    close
2017-02-12 14:07:14 1
2017-02-12 14:07:35 1
2017-02-12 17:12:14 1
2017-02-12 17:23:40 1
2017-02-12 17:51:52 1
2017-02-13 04:15:58 1

最糟糕的是,它正在使用plunker:http://plnkr.co/edit/Moyyawptt8lY0pLBDQDr?p=preview

但在我的代码中,出了点问题。我只是不知道在哪里调试,因为错误信息是如此可怕的不清楚。

有人可以帮帮我吗?这对人类来说是最大的帮助!

这是console.log(data);

的屏幕截图

enter image description here

0 个答案:

没有答案