Question

我正在使用this github project中的代码创建一个带有d3js图表的python flask应用程序。 templates / index.html文件包含在HTML文件中编写的css和js代码。但是，如果我尝试将该代码放在外部文件中并在我的index.html中引用该文件，则该文件无法跟踪。我尝试了不同的路径（模板文件夹和根文件夹），但没有一个工作。

请建议我应该如何使用外部css和js文件。

这是我的templates / index.html代码：

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">

    <title>flask+d3 Hello World</title>

    <script src="http://d3js.org/d3.v2.js"></script>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <link rel="stylesheet" type="text/css" href="templates/mystyle.css">
    <link rel="stylesheet" type="text/css" href="../mystyle.css">

</head>
<body>

    <h1>Hello World using d3.js &amp; Flask</h1>

    <div id="info">
        <div id="point-info">
            Click on a point.
        </div>
    </div>

    <div id="plot">
    </div>

    <script>

        // Set up the plot window.
        var margin = 80;
        var w = 700 - 2 * margin, h = 500 - 2 * margin;
        var svg = d3.select("#plot").append("svg")
                        .attr("width", w + 2 * margin)
                        .attr("height", h + 2 * margin)
                    .append("svg:g")
                        .attr("transform", "translate(" + margin + ", " + margin + ")");

        // The colorbar.
        var color = d3.scale.quantize()
                      .range(["#156b87", "#876315", "#543510", "#872815"])
                      .domain([0, 1]);

        // Axes scaling functions.
        var xscale = d3.scale.linear().range([0, w]);
        var yscale = d3.scale.linear().range([h, 0]);

        // The axes objects themselves.
        var xaxis = d3.svg.axis().scale(xscale).ticks(8);
        var yaxis = d3.svg.axis().scale(yscale).ticks(8).orient("left");

        svg.append("svg:g").attr("class", "x axis")
                           .attr("transform", "translate(0, " + h + ")");
        svg.append("svg:g").attr("class", "y axis");

        // Show the information about a particular point.
        var show_info = function (d) {
            d3.select("#point-info").text("This is point " + d._id + ". "
                + "It has the coordinates (" + d.x + ", " + d.y + ").");
        };

        // Load the data.
        var callback = function (data) {
            // Rescale the axes.
            xscale.domain([d3.min(data, function (d) { return d.x; }) - 0.05,
                           d3.max(data, function (d) { return d.x; }) + 0.05]);
            yscale.domain([d3.min(data, function (d) { return d.y; }) - 0.05,
                           d3.max(data, function (d) { return d.y; }) + 0.05]);

            // Display the axes.
            svg.select(".x.axis").call(xaxis);
            svg.select(".y.axis").call(yaxis);

            // Insert the data points.
            svg.selectAll("circle").data(data).enter()
                .append("circle")
                    .attr("id", function (d) { return d._id; })
                    .attr("cx", function (d) { return xscale(d.x); })
                    .attr("cy", function (d) { return yscale(d.y); })
                    .attr("r", function (d) { return 2 * Math.sqrt(d.area); })
                    .style("fill", function (d) { return color(d.color); })
                    .on("mousedown", show_info);
        };

        d3.json("/data", callback);

    </script>

</body>
</html>

这是我的mystyle.css代码：

path.line {
    fill: none;
    stroke: #666;
    stroke-width: 1.5px;
}

.domain {
    stroke-width: 1px;
}

circle {
    cursor: pointer;
}

.axis {
    shape-rendering: crispEdges;
}

.axis line, .axis path {
    stroke-width: 1px;
    stroke: #000;
    fill: none;
}

.tooltip {
    display: none;
}

.tooltip.active {
    display: block;
}

.tooltip rect {
    fill: #ff0000;
}

Answer 1

简单的答案是：创建一个名为'static'的文件夹，将静态文件放在其中，HTML中的url路径为'/static/your_file_path/your_file_name.extension'。

以下是static file上的文件，您可以在其中找到真实的答案。

如果您想更改默认的“静态”文件夹并更改默认的静态文件网址路径，可以阅读这些application startup configurations

在python flask应用程序中包含css，javascript的路径？

1 个答案: