Javascript 为什么网页上没有显示任何内容？_Javascript_Ajax_Csv_D3.js

Javascript 为什么网页上没有显示任何内容？

javascript ajax csv d3.js

Javascript 为什么网页上没有显示任何内容？,javascript,ajax,csv,d3.js,Javascript,Ajax,Csv,D3.js,文件“LoanStats3a.csv”位于同一文件夹中。但不知何故，这是行不通的。另外，我将x和y值分为两行，因为数量太大，但是，这应该为它们指定正常值 <html> <title>Loans</title> <script src="http://d3js.org/d3.v3.js" charset="utf-8"></script> <style> #LoanStats3a { color: b

文件“LoanStats3a.csv”位于同一文件夹中。但不知何故，这是行不通的。另外，我将x和y值分为两行，因为数量太大，但是，这应该为它们指定正常值

<html>
<title>Loans</title>

<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
<style>
    #LoanStats3a {
        color: blueviolet;
    }
</style>

<body>
    <script>
        d3.csv("LoanStats3a.csv", function (file1) {
            var bg = d3.select("body").append("svg")
                .attr("width", 5000)
                .attr("height", 5000);

            var data1 = [{
                    x: d.loan_amnt,
                    y: d.term
                },
                {
                    x: d.int_rate,
                    y: d.annual_inc
                },
                {
                    x: d.member_id,
                    y: d.id
                }
            ];

            var group = bg.append("g")
                .attr("transform", "translate (100,100)");
            var line = d3.svg.line("line")
                .x(function (d) {
                    return d.x / 100;
                })
                .y(function (d) {
                    return d.y / 100;
                });

            bg.selectAll("path")
                .data(file1)
                .enter()
                .append("line")
                .attr("cx", 500)
                .attr("cy", 500)
                .attr("d", line)
                .attr("fill", "black")
                .attr("stroke", "black")
                .attr("stroke-width", 20);
        });
    </script>

</body>

</html>


贷款
#LoanStats3a{
颜色：蓝紫色；
}
d3.csv（“LoanStats3a.csv”，函数（文件1）{
var bg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，5000）
.attr（“高度”，5000）；
变量数据1=[{
x:d.贷款，
y:d术语
},
{
x:d.int_比率，
y:d.annual_公司
},
{
x:d.成员id，
y:d.id
}
];
var group=bg.追加（“g”）
.attr（“转换”、“翻译（100100）”）；
var line=d3.svg.line（“line”）
.x（功能（d）{
返回d.x/100；
})
.y（功能（d）{
返回d.y/100；
});
背景：选择全部（“路径”）
.数据（文件1）
.输入（）
.附加（“行”）
.attr（“cx”，500）
.attr（“cy”，500）
.attr（“d”，行）
.attr（“填充”、“黑色”）
.attr（“笔划”、“黑色”）
.attr（“笔划宽度”，20）；
});

此外，以下是我使用本地数据时的代码，但仍然没有显示任何内容：

<html>


<title>Loans</title>

<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>

<style>
    #LoanStats3a {
        color: blueviolet;
    }
</style>

<body>
    <script>
        d3.csv("LoanStats3a.csv", function (file1) {
            var bg = d3.select("body").append("svg")
                .attr("width", 5000)
                .attr("height", 5000);

            var data1 = [
                //{x:d.loan_amnt , y : d.term},
                //{x:d.int_rate , y : d.annual_inc},
                //{x:d.member_id , y : d.id}
                {
                    x: 10,
                    y: 20
                },
                {
                    x: 30,
                    y: 40
                },
                {
                    x: 50,
                    y: 60
                }

            ];

            var group = bg.append("g")
                .attr("transform", "translate (100,100)");
            var line = d3.svg.line()
                .x(function (d) {
                    return d.x / 100;
                })
                .y(function (d) {
                    return d.y / 100;
                });

            bg.selectAll("path")
                .data([data1])
                .enter()
                .append("line")
                .attr("cx", 500)
                .attr("cy", 500)
                .attr("d", line)
                .attr("fill", "black")
                .attr("stroke", "black")
                .attr("stroke-width", 20);

        });
    </script>

</body>

</html>


贷款
#LoanStats3a{
颜色：蓝紫色；
}
d3.csv（“LoanStats3a.csv”，函数（文件1）{
var bg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，5000）
.attr（“高度”，5000）；
变量数据1=[
//{x:d.loan\u amnt，y:d.term}，
//{x:d.int_rate，y:d.annual_inc}，
//{x:d.member_id，y:d.id}
{
x:10，
y:20
},
{
x:30，
y:40
},
{
x:50，
y:60
}
];
var group=bg.追加（“g”）
.attr（“转换”、“翻译（100100）”）；
var line=d3.svg.line（）
.x（功能（d）{
返回d.x/100；
})
.y（功能（d）{
返回d.y/100；
});
背景：选择全部（“路径”）
.data（[data1]）
.输入（）
.附加（“行”）
.attr（“cx”，500）
.attr（“cy”，500）
.attr（“d”，行）
.attr（“填充”、“黑色”）
.attr（“笔划”、“黑色”）
.attr（“笔划宽度”，20）；
});

以下是您的问题的解决方案

你离得不远

var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，5000）
.attr（“高度”，5000）
.附加（“g”）
.attr（“转换”、“翻译（100100）”）；
var arc=d3.svg.arc（）
.内半径（80）
.外层（100）
.startAngle（0）
.端角（（100*Math.PI）-1）；
追加（“路径”）
.attr（“类”、“弧”）
.attr（“d”，弧）
.arc{
填充物：红色；
}
/{x:d.loan\u amnt，y:d.term}，…正斜杠似乎导致语法错误。修复了这一问题和相同的问题。能否提供loanStat3a.csv的示例数据，用于测试失败的位置try.attr（“d”，第（data1）行）请尝试使用硬编码数据代替csv数据进行测试。为了查看读取文件数据或脚本问题，我冒昧地重命名了您的VAR并“精简”了您的代码这纯粹是对“如何显示弧”问题的回答，不知道csv，但是如果你的身体里真的有一段身份证的话，这会有帮助吗？它确实有帮助，谢谢你！我知道如何从csv导入数据并制作一个圆圈，但是，很难将csv文件中的特定数据放入数组中。这就是我面临的挑战所在。