Question

我无法连接D3库。我使用python创建了一个本地服务器，但Chrome继续说它无法加载本地文件。这是我的代码的问题，还是有另一个问题？我尝试在Firefox和IE上使用localhost无济于事。

<DOCTYPE! html>
<html lang='en'>
    <head>
        <meta charset='utf-8'>
        <title>Тестовая диаграмма</title>
        <script type='text/javascript' src='file:/c:/Users/John/Documents/HTML_project_files/d3/d3.v3.js'></script>
    </head>
    <body>
        <script type='text/javascript'>
            var dataset = [5,20,10,13,50];
            var w = 500;
            var h = 100;
            var barpad = 1;
            var svg = d3.select('body')
                        .append('svg')
                        .attr({
                                width: w,
                                height: h
                        });
            svg.selectAll('rect')
               .data(dataset)
               .enter()
               .append('rect')
               .attr({
                    x: function(d, i) { return i * (w/dataset.length);},
                    y: function(d) { return h - (d * 2);},
                    width: w / dataset.length - barpad,
                    height: function(d) { return d * 4;}
                });
            svg.selectAll('text')
               .data(dataset)
               .enter()
               .append('text')
               .text(function(d) {
                    return d;
               })
               .attr({
                    x: function(d,i) { return i * (w/dataset.length) + (w/ dataset.length - barpad) / 2;},
                    y: function(d) { return h - (d * 2) + 15;},
                    'font-family': "serif",
                    'font-size': "11px",
                    'fill': "white",
                    'text-anchor': "middle"
               });
        </script>
    </body>
</html>

Answer 1

这是因为Chrome的默认安全设置。阅读更多here。

要解决此问题，您有2个选项，

1）从CDN加载JS文件

<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.10/d3.js'></script>

2）用户相对路径。如果你在HTML_project_files foolder中工作，你可以做

<script type='text/javascript' src='d3/d3.v3.js'></script>

如果你想升级一级。那么你可以做到

src='../d3/d3.v3.js'某某......

Answer 2

这是因为您正在运行启用了网络安全的Chrome。

而不是

<script type='text/javascript' src='file:/c:/Users/John/Documents/HTML_project_files/d3/d3.v3.js'></script>

这样做

<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.10/d3.js'></script>

Chrome阻止本地文件上传

2 个答案: