Question

以下是我的代码。然而，当我运行它时，我得到一个空白页面。为什么会这样？另外，如何使用数百列的数据使用d3制作简单的交互式视觉效果？我想补充一下以下csv文件＆＃34; LoanStats3a.csv＆＃34;在同一个文件夹中。

 <html>
    <title>Loans</title>
<link href="../css/jquery-ui.css" rel="stylesheet" />
<script src="../Scripts/jquery-1.12.4"></script>  
<script src="../Scripts/jquery-1.12.4.js"></script>
<script src="../Scripts/jquery-ui.js"></script>
<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
    <style>
        #LoanStats3a{
           color: blueviolet;   
        }
        </style>
<body>
    <script>
        d3.csv("LoanStats3a", function (file1){
            var bg = d3.select("body").append("svg")
                    .attr("width", 5000)
                    .attr("height", 5000);

        bg.selectAll("rect")
                    .data(file1)
                    .enter()
                    .attr("width", function(d){return d.loan_amnt / 100;})
                    .attr("height", function(d) {return d.term;})
                    .attr("y", function (d,i) {return i *50;})
                    .attr("fill", function (d){"red","blue";});
    }   
    </script>
</body>

Answer 1

这是因为在将数据绑定到空选择之后，您必须为每个数据append一个rect元素。

此外，您的属性“填充”不正确。

bg.selectAll("rect")
    .data(file1)
    .enter()
    .append("rect") // <= You need to create a rect for each data
    .attr("width", function(d){return d.loan_amnt / 100;})
    .attr("height", function(d) {return d.term;})
    .attr("y", function (d,i) {return i *50;})
    .attr("fill", "blue");

如果要根据数据更改颜色，请创建一个函数并return。

// For example
.attr("fill", function(d){return d.loan_amnt > 25000 ? "blue" : "red"});

这是一个随机数据的JsFiddle：DEMO

编辑：如果它仍无法正常工作，则可能是您的数据存在问题，因为我们的代码之间唯一不同的是我在JsFiddle中使用了自定义数据。

我注意到您的csv文件没有扩展名.csv，只是LoanStats3a？您应该console.log(file1)，检查您的数据是否正确。

请查看D3 CSV了解如何加载csv文件。

Answer 2

您最后错过了结束)：

     .attr("fill", function (d){"red","blue";});
   }  
//  ^ Here should be a )
</script>

如果你有适当的缩进，这会有所帮助：

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

    bg.selectAll("rect")
        .data(file1)
        .enter()
        .attr("width", function(d) {
            return d.loan_amnt / 100;
        })
        .attr("height", function(d) {
            return d.term;
        })
        .attr("y", function(d, i) {
            return i * 50;
        })
        .attr("fill", function(d) {
            "red", "blue"; // What is going on here?
                           // Did you for to return?
                           // return "blue";
        });
});
</script>

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

2 个答案: