django - 与 d3.js 一起使用时，Django 本地主机给我的 csv 文件一个错误

问题描述

在我的 Django 应用程序中，我正在创建一个 csv 文件。当我尝试将该文件与 D3.js 样板一起使用时，它找不到 csv 文件？

我尝试将 csv 文件所在的位置移动到根目录并移动到它自己的文件夹中，但它没有做任何不同的事情

        {% extends "lm_test/base.html" %}
        {% block content %}
        <meta charset="utf-8">
        <style>

        svg {
        font: 10px sans-serif;
        }

        .y.axis path {
        display: none;
        }

        .y.axis line {
        stroke: #fff;
        stroke-opacity: .2;
        shape-rendering: crispEdges;
        }

        .y.axis .zero line {
        stroke: #000;
        stroke-opacity: 1;
        }

        .title {
        font: 300 78px Helvetica Neue;
        fill: #666;
        }

        .birthyear,
        .age {
        text-anchor: middle;
        }

        .birthyear {
        fill: #fff;
        }

        rect {
        fill-opacity: .6;
        fill: #e377c2;
        }

        rect:first-child {
        fill: #1f77b4;
        }

        </style>
        <body>
        <script src="https://d3js.org/d3.v3.min.js"></script>
        <script>

        var margin = {top: 20, right: 40, bottom: 30, left: 20},
            width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom,
            barWidth = Math.floor(width / 19) - 1;

        var x = d3.scale.linear()
            .range([barWidth / 2, width - barWidth / 2]);

        var y = d3.scale.linear()
            .range([height, 0]);

        var yAxis = d3.svg.axis()
            .scale(y)
            .orient("right")
            .tickSize(-width)
            .tickFormat(function(d) { return Math.round(d / 1e6) + "M"; });

        // An SVG element with a bottom-right origin.
        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 + ")");

        // A sliding container to hold the bars by birthyear.
        var birthyears = svg.append("g")
            .attr("class", "birthyears");

        // A label for the current year.
        var title = svg.append("text")
            .attr("class", "title")
            .attr("dy", ".71em")
            .text(2000);

        d3.csv("../temp.csv", function(error, data) {

        // Convert strings to numbers.
        data.forEach(function(d) {
            d.people = +d.people;
            d.year = +d.year;
            d.age = +d.age;
        });

        // Compute the extent of the data set in age and years.
        var age1 = d3.max(data, function(d) { return d.age; }),
            year0 = d3.min(data, function(d) { return d.year; }),
            year1 = d3.max(data, function(d) { return d.year; }),
            year = year1;

        // Update the scale domains.
        x.domain([year1 - age1, year1]);
        y.domain([0, d3.max(data, function(d) { return d.people; })]);

        // Produce a map from year and birthyear to [male, female].
        data = d3.nest()
            .key(function(d) { return d.year; })
            .key(function(d) { return d.year - d.age; })
            .rollup(function(v) { return v.map(function(d) { return d.people; }); })
            .map(data);

        // Add an axis to show the population values.
        svg.append("g")
            .attr("class", "y axis")
            .attr("transform", "translate(" + width + ",0)")
            .call(yAxis)
            .selectAll("g")
            .filter(function(value) { return !value; })
            .classed("zero", true);

        // Add labeled rects for each birthyear (so that no enter or exit is required).
        var birthyear = birthyears.selectAll(".birthyear")
            .data(d3.range(year0 - age1, year1 + 1, 5))
            .enter().append("g")
            .attr("class", "birthyear")
            .attr("transform", function(birthyear) { return "translate(" + x(birthyear) + ",0)"; });

        birthyear.selectAll("rect")
            .data(function(birthyear) { return data[year][birthyear] || [0, 0]; })
            .enter().append("rect")
            .attr("x", -barWidth / 2)
            .attr("width", barWidth)
            .attr("y", y)
            .attr("height", function(value) { return height - y(value); });

        // Add labels to show birthyear.
        birthyear.append("text")
            .attr("y", height - 4)
            .text(function(birthyear) { return birthyear; });

        // Add labels to show age (separate; not animated).
        svg.selectAll(".age")
            .data(d3.range(0, age1 + 1, 5))
            .enter().append("text")
            .attr("class", "age")
            .attr("x", function(age) { return x(year - age); })
            .attr("y", height + 4)
            .attr("dy", ".71em")
            .text(function(age) { return age; });

        // Allow the arrow keys to change the displayed year.
        window.focus();
        d3.select(window).on("keydown", function() {
            switch (d3.event.keyCode) {
            case 37: year = Math.max(year0, year - 10); break;
            case 39: year = Math.min(year1, year + 10); break;
            }
            update();
        });

        function update() {
            if (!(year in data)) return;
            title.text(year);

            birthyears.transition()
                .duration(750)
                .attr("transform", "translate(" + (x(year1) - x(year)) + ",0)");

            birthyear.selectAll("rect")
                .data(function(birthyear) { return data[year][birthyear] || [0, 0]; })
            .transition()
                .duration(750)
                .attr("y", y)
                .attr("height", function(value) { return height - y(value); });
        }
        });

        </script>

        {% endblock content %}

观点是：

            def results(request):
            disease = request.GET.get('disease_name')
            year_from = int(request.GET.get('year_from'))
            year_to = int(request.GET.get('year_to'))

            if year_from < year_to:
            years = range(year_from, year_to, +1)
            else:
                years = range(year_from, year_to, -1)

            Entrez.email = "chrisgbeldam@gmail.com" #Required by NCBI

            results_file = open('temp.csv', 'w') #Open csv file
            result_writer = csv.writer(results_file, delimiter=',')
            result_writer.writerow(['Year', 'Number Of Results'])
            for year in years: #Checks the number of results for each year and then loops
                handle = Entrez.esearch(
                    db="pubmed",
                    sort="relevance",
                    term=disease,
                    mindate=year,
                    maxdate=year,
                    retmode="xml",
                )
                results = Entrez.read(handle) 
                results_count = results['Count'] # Total number of results for the search
                results_yearly = print(f"Number of papers in {year} is {results_count}")
                handle.close() #Close E Search

                result_writer.writerow([year,results_count]) # Writes out the results to csv file

            results_file.close()
            context = {
                'disease': disease,
                'year': year,
                'results': results,
                'results_count': results_count,
                'results_file': results_file,
                }
            return render(request, 'lm_test/results.html', context)

我希望结果是 D3 可以看到我的 temp.csv 文件，但它拒绝并给我一个“加载资源失败：服务器响应状态为 404（未找到）”错误以及未捕获的 TypeError：不能读取对象未定义的属性“forEach”。(?csrfmiddlewaretoken=4I4wgoSynXQX6FyeSsDJWgNnjH6CgQyoZ0U7pvJV0D8vEBRynwYSalwrCZPjtw7v&disease_name=Cancer&year_from=2016&year_to=2000&submit=:117) 在 Object.t (d3.v3.min.js:1) 在 XMLHttp.v1'd3.min 错误

标签： djangocsvd3.js

django - 与 d3.js 一起使用时，Django 本地主机给我的 csv 文件一个错误

问题描述

解决方案

推荐阅读