2016-03-23 9 views
0

ich dies unter einfachen Code leite:Leere Web-Seite ohne Fehler beim Laden von JSON-Datei

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <script type="text/javascript" src="//d3js.org/d3.v3.min.js"> </script> 

</head> 
<body> 
    <script type="text/javascript"> 

     //Width and height 
     var w = 500;1 
     var h = 300; 

     //Define default path generator 
     var path = d3.geo.path(); 

     //Create SVG element 
     var svg = d3.select("body") 
        .append("svg") 
        .attr("width", w) 
        .attr("height", h); 

     //Load in GeoJSON data 
     d3.json("india.json", function(error,json) { 
     console.log(json); 

      //Bind data and create one path per GeoJSON feature 
      svg.selectAll("path") 
       .data(json.features) 
       .enter() 
       .append("path") 
       .attr("d", path); 

     }); 

    </script> 
</body> 
</html> 

Wenn ich es laufen, ich bin die leere Web-Seite ohne Fehler. india.json Datei ist eine gültige JSON-Datei, ich verifizierte es in http://jsonlint.com/

Ich bin neu in Javascript. Jede Hilfe würde sehr geschätzt werden.

Danke,

+0

druckt der Json in der Konsole? Und hat die JSON-Anfrage irgendwelche Fehler? Sie würden nicht unbedingt automatisch ausgedruckt, da sie vom Erfolgshandler verarbeitet werden. – Binvention

+0

Ja. er druckt alle Daten, und es gibt keine Fehler in der Konsole – Gopal

+0

dann die json isnt Ihr Problem seine, wie Sie es einrichten mit bis d3 – Binvention

Antwort

0

Endlich, nach vielen Wegen, fand ich die Lösung ein, es war Problem mit Projektion, so habe ich den Code unten und es funktionierte verwendet.

 //Width and height 
     var w = 960 
     var h = 1000 

     //Define map projection 
     var projection = d3.geo.mercator() 
           .translate([w/2,h/2]) 
           .scale(5000); 

     //Define path generator 
     var path = d3.geo.path() 
         .projection(projection); 
Verwandte Themen