Warum wird nichts auf meiner Webseite angezeigt?

Das Folgende ist mein Code. Aber wenn ich es laufe, bekomme ich eine leere Seite. Warum ist das der Fall? Wie kann ich auch Daten aus Hunderten von Spalten verwenden, um ein einfaches interaktives visual mit d3 zu erstellen? Ich möchte hinzufügen, dass die folgende csv-Datei "LoanStats3a.csv" in demselben Ordner ist.Warum wird nichts auf meiner Webseite angezeigt?

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

Quelle

2016-06-11 Yousuf Farhan

Es gibt nichts in Ihrem HTML-Code dh Body-Tag, welche HTML-Markup –

Es gibt nichts in der HTML-Code, der auf der Website erscheinen würde, wie der oben erwähnte Kommentar, und die Dateien in den Link-und Skript-Tags verwiesen Verweisen Sie eine lokale Datei auf ein Verzeichnis zurück, so dass diese Dateien nicht geladen werden, es sei denn, Sie haben diese Dateien auf Ihrem Computer oder Sie haben diese Datei auf eine Website hochgeladen, die zu diesen Verzeichnissen zurückkehrt. – ajc2000

Isnt d3 soll das hinzufügen? –

Dies liegt daran, nach dem die Daten auf die leere Auswahl verbindlich , müssen Sie append ein rect Element für jede Daten.

Auch Ihr Attribut "füllen" ist falsch.

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");

Wenn Sie die Farbe auf den Daten abhängig ändern möchten, erstellen Sie eine Funktion und return etwas.

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

Hier ist ein JsFiddle mit zufälligen Daten: DEMO

EDIT: Wenn es immer noch nicht funktioniert, ist es wahrscheinlich ein Problem mit Ihren Daten, weil die einzige Unterschied zwischen unserem Code ist, dass ich benutzerdefinierte Daten verwendet in der JsFiddle.

Ich bemerke, dass Ihre CSV-Datei nicht die Erweiterung .csv hat, es ist nur LoanStats3a?
Sie sollten eine console.log(file1) tun, um zu überprüfen, ob Ihre Daten korrekt sind.

Werfen Sie einen Blick auf D3 CSV für das Laden einer CSV-Datei.

Quelle

2016-06-11 20:52:54

Möglicherweise liegt ein Problem mit Ihren Daten vor. Siehe meine Bearbeitung. –

Ich löste das Problem. Danke für das Antworten! –

Sie vermissen eine Schließung ) am Ende:

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

Es hilft, wenn Sie die richtigen Einzug haben:

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

Quelle

2016-06-11 19:38:18 andlrc

Danke für Ihre Antwort! Ich habe festgestellt, dass ich das gleiche Problem habe. –

Warum wird nichts auf meiner Webseite angezeigt?

Antwort

Verwandte Themen