2016-11-04 4 views
1

Ich versuche zu üben die USA Chorleth Karte (https://plot.ly/javascript/choropleth-maps/)Plotly Javascript funktioniert nicht w Lokale CSV

zu replizieren, wenn ich ihre Code-Schnipsel laufen, wo es in die CSV-Datei verknüpft (https://raw.githubusercontent.com/plotly/datasets/master/2011_us_ag_exports.csv) es funktioniert.

Wenn ich jedoch versuche, diese CSV-Datei herunterzuladen und sie mit einem lokalen Dateipfad auszuführen, funktioniert das Diagramm nicht. Es fällt mir schwer, das zu überprüfen, da Plotly nicht alles explizit dokumentiert (ich weiß, dass dies etwas die D3-Protokolle verwendet).

Alles, was ich getan habe, ist Dateipfade zu ändern.

<head> 
<!-- Plotly.js --> 
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
</head> 
<body> 
<!-- Plotly chart will be drawn inside this DIV --> 
<div id="myDiv"></div> 
<script> 
    Plotly.d3.csv("C:/Users/Me/Desktop/JavaScript Practice/2011_us_ag_exports.csv", function (err, rows) { 
     function unpack(rows, key) { 
      return rows.map(function (row) { return row[key]; }); 
     } 

     var data = [{ 
      type: 'choropleth', 
      locationmode: 'USA-states', 
      locations: unpack(rows, 'code'), 
      z: unpack(rows, 'total exports'), 
      text: unpack(rows, 'state'), 
      zmin: 0, 
      zmax: 17000, 
      colorscale: [ 
       [0, 'rgb(242,240,247)'], [0.2, 'rgb(218,218,235)'], 
       [0.4, 'rgb(188,189,220)'], [0.6, 'rgb(158,154,200)'], 
       [0.8, 'rgb(117,107,177)'], [1, 'rgb(84,39,143)'] 
      ], 
      colorbar: { 
       title: 'Millions USD', 
       thickness: 0.2 
      }, 
      marker: { 
       line: { 
        color: 'rgb(255,255,255)', 
        width: 2 
       } 
      } 
     }]; 

     console.log(data.locations); 
     var layout = { 
      title: '2011 US Agriculture Exports by State', 
      geo: { 
       scope: 'usa', 
       showlakes: true, 
       lakecolor: 'rgb(255,255,255)' 
      } 
     }; 
     Plotly.plot(myDiv, data, layout, { showLink: false }); 
    }); 
</script> 

Antwort

2

Änderung Ihren Weg zu einem relativen Pfad ist Plotly.d3.csv("2011_us_ag_exports.csv",......

das Problem mit plotly nicht, sondern local file access with javascript.

+0

Ich habe das versucht und es hat nicht funktioniert; aber das ist mein erster Ausflug ins Webdesign. Die Datei befindet sich im selben Ordner wie die HTML-Datei. –

+0

Sie sehen wahrscheinlich einen Cross-Origin-Fehler in der Konsole - die Ausführung eines lokalen Servers löst dies: http://StackOverflow.com/Questions/21006647/Cannot-Import-Data-From-Csv-File-in-D3 – Conan

+0

Ja, das scheint es zu sein, danke. –

Verwandte Themen