為什么我的網頁上沒有任何顯示？

Question

以下是我的代碼。 但是，當我運行它時，我得到一個空白頁。 為什么會這樣呢？ 另外，如何使用d3使用數百列中的數據來制作簡單的交互式視覺效果？ 我要補充一點，以下csv文件“ LoanStats3a.csv”位於同一文件夾中。

 <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 個解決方案

解決方案1
1 已采納 2016-06-11 20:52:54

解決方案2
0 2016-06-11 19:38:18

為什么我的網頁上沒有任何顯示？

問題描述

2 個解決方案

解決方案1 1 已采納 2016-06-11 20:52:54

解決方案2 0 2016-06-11 19:38:18

解決方案1
1 已采納 2016-06-11 20:52:54

解決方案2
0 2016-06-11 19:38:18