javascript - 为什么网页上不显示任何内容?

标签 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: 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>

此外,这是我使用本地数据时仍然没有任何显示的代码:

<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>

最佳答案

这是您问题的解决方案

你离我们并不遥远

var svg = d3.select("body")
    .append("svg")
    .attr("width", 5000)
    .attr("height", 5000)
    .append("g")
    .attr("transform", "translate(100,100)");

var arc = d3.svg.arc()
    .innerRadius(80)
    .outerRadius(100)
    .startAngle(0)
    .endAngle((100 * Math.PI)-1);

svg.append("path")
    .attr("class", "arc")
    .attr("d", arc);
.arc {
  fill: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

关于javascript - 为什么网页上不显示任何内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37770313/

相关文章:

javascript - 从 Angular 中的 Node.js 获取响应

javascript - 更改 Twitter Feed 中的 Twitter Logo

WordPress WebToffee 替代品

python - 将数据插入两列 csv

python - Boto3上传到S3 : cut off last few rows of data from a . csv文件

javascript - 如何在 TinyMCE 中设置响应式文件管理器返回绝对 url

JavaScript 闭包行为异常

php - 如何维护多个 AJAX 调用之间的 mysql 连接?

javascript - 从数据库获取数据到jquery变量

javascript - 如何使用 PJAX 加载整个页面