Question

我正在尝试使用Visual Studio 2013和 csv 文件创建基本的 d3.js 图表。这是我第一次使用Visual Studio而无法理解数据绑定没有发生的原因。运行以下代码后，我没有得到任何结果。我相信它是因为 csv或json 文件应该在同一个文件夹中。但即便如此，我也没有得到理想的结果。

HTML代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> D3 Tutorial</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="https://rawgithub.com/NickQiZhu/dc.js/master/web/js/crossfilter.js"></script>
<meta http-equiv="content-type" content="text/html; charset=UTF8">


 </head>
<body>
<script>

    d3.csv("mydata.csv", function(data) { 

        var canvas = d3.select("body")
                        .append("svg")
                        .attr("width", 500)
                        .attr("height",500)

        canvas.selectAll("rect")
                .data(data)
                .enter()
                    .append("rect")
                    .attr("width", function(d) { return d.age * 50;})
                    .attr("height" , 50)
                    .attr("y", function (d , i) { return i * 50 })
                    .attr("fill", "blue")
</script>

</body>
</html>

请在下面找到我的解决方案资源管理器的屏幕截图

Solution Explorer - Visual Studio 2013

同样 mydata.csv

“名称”， “年龄”

“玛利亚”，30

“佛瑞德”，50

“弗朗西斯”，12

错误

XMLHttpRequest无法加载file：/// C：/xampp/htdocs/mydata.csv。交叉源请求仅支持协议方案：http，数据，chrome扩展，https，chrome-extension-resource。

未捕获的TypeError：无法读取null的属性'length'

Uncaught NetworkError：无法在'XMLHttpRequest'上执行'send'：无法加载'file：/// C：/xampp/htdocs/mydata.csv'。

Answer 1

您尝试通过JavaScript加载本地文件（"mydata.csv"），由于安全原因，这在大多数现代浏览器中受到限制。要使脚本正常工作，您需要通过Web服务器加载页面。您可以将文件上载到远程服务器，也可以在本地计算机上托管文件以进行开发。

将CSV添加到ASP.NET Web应用程序

1 个答案: