D3.js“无法读取未定义的属性'长度'错误与Play框架

Question

我的代码在Play Framework之外工作但在我在Play中实现代码时给出了错误。当我绑定d3.js时，它给我以下错误：

"Uncaught TypeError: Cannot read property 'length' of undefined
    at Object.ms [as extent] (d3.v4.min.js:2)
    at Object.<anonymous> ((index):103)
    at p.call (d3.v4.min.js:2)
    at XMLHttpRequest.e (d3.v4.min.js:2)"

为什么会这样？我确实正确地整合了这些来源。所有其他来源都完美无缺。

编辑：Play Framework版本2.6.6和sbt版本0.13.5

请求的代码：

<script language="javascript" type="text/javascript">
    window.onload = function() {


        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("%d-%b-%y");

        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("/assets/images/data.tsv", function (d) {
            d.date = parseTime(d.date);
            d.close = +d.close;
            return d;
        }, function (error, data) {

            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," + height + ")")
                    .call(d3.axisBottom(x))
                    .append("text")
                    .attr("fill", "#000")
                    .attr("transform", "rotate(0)")
                    .attr("x", 6)
                    .attr("dx", "1em")
                    .attr("text-anchor", "begin   ")
                    .text("time")
                    .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("Price ($)");

            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>

这是d3脚本，它位于正文之外的html文件的底部。

在身体本身中，除其他外，我还使用了这个SVG对象：

<svg id="svg" width="960" height="500"></svg>

正如我所说，这在游戏之外完美无缺。但是，如果我开始播放它就会抛出错误。