Javascript d3.js讀取本地CSV文件

因此，我需要使用本地加載的HTML網頁（例如file：///）讀取.CSV文件，並使用d3.js在圖上繪製contants。到目前爲止，我試圖一起加入兩個例子，但沒有成功...Javascript d3.js讀取本地CSV文件

如果打開它，它能夠讀取本地csv文件的內容，但出於某種原因，圖形不會出現。

任何幫助非常感謝！

<!DOCTYPE html> 
<style> /* set the CSS */ 

body { font: 12px Arial;} 

path { 
    stroke: steelblue; 
    stroke-width: 2; 
    fill: none; 
} 

.axis path, 
.axis line { 
    fill: none; 
    stroke: grey; 
    stroke-width: 1; 
    shape-rendering: crispEdges; 
} 

</style> 

<html lang="en"> 
    <head> 
    <meta http-equiv="X-UA-Compatible" content="chrome=1" /> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> 
    <!--this doesn't seem to help--> 
    <meta http-equiv="Access-Control-Allow-Origin" content="*"/> 
    <title>Process local CSV file</title> 
    <script src="d3.js" charset="utf-8"></script> 
    </head> 
    <body> 
    <script> 
     var rowToHtml = function(row) { 
     var result = ""; 
     for (key in row) { 
      result += key + ": " + row[key] + "<br/>" 
     } 
     return result; 
     } 

     var previewCsvUrl = function(csvUrl) { 
     d3.csv(csvUrl, function(rows) { 
      d3.select("div#preview").html(
      "<b>First row:</b><br/>" + rowToHtml(rows[0])); 
     }) 
     } 

     d3.select("html") 
      .style("height","100%") 

     d3.select("body") 
      .style("height","100%") 
      .style("font", "12px sans-serif") 

     .append("input") 
      .attr("type", "file") 
      .attr("accept", ".csv") 
      .style("margin", "5px") 
      .on("change", function() { 
      var file = d3.event.target.files[0]; 
      if (file) { 
       var reader = new FileReader(); 
       reader.onloadend = function(event1) { 
        var dataUrl = event1.target.result; 
        // The following call results in an "Access denied" error in IE. 
        previewCsvUrl(dataUrl); 
        rendergraph(dataUrl); 
       }; 
      reader.readAsDataURL(file); 
      } 
     }) 

     d3.select("body") 
     .append("div") 
     .attr("id", "preview") 
     .style("margin", "5px") 


var svg = d3.select("svg"), 
    margin = {top: 20, right: 20, bottom: 30, left: 50}, 
    width = +svg.attr("width") - margin.left - margin.right, 
    height = +svg.attr("height") - margin.top - margin.bottom, 
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

var parseTime = d3.timeParse("%d-%b-%y"); 

var x = d3.scaleTime() 
    .rangeRound([0, width]); 

var y = d3.scaleLinear() 
    .rangeRound([height, 0]); 

var line = d3.line() 
    .x(function(d) { return x(d.date); }) 
    .y(function(d) { return y(d.close); }); 

var rendergraph = function(url1) { 
d3.csv(url1, function(d) { 
    d.date = parseTime(d.date); 
    d.close = +d.close; 
    return d; 
}, function(error, data) { 
    if (error) throw error; 

    x.domain(d3.extent(data, function(d) { return d.date; })); 
    y.domain(d3.extent(data, function(d) { return d.close; })); 

    g.append("g") 
     .attr("transform", "translate(0," + height + ")") 
     .call(d3.axisBottom(x)) 
    .select(".domain") 
     .remove(); 

    g.append("g") 
     .call(d3.axisLeft(y)) 
    .append("text") 
     .attr("fill", "#000") 
     .attr("transform", "rotate(-90)") 
     .attr("y", 6) 
     .attr("dy", "0.71em") 
     .attr("text-anchor", "end") 
     .text("Price ($)"); 

    g.append("path") 
     .datum(data) 
     .attr("fill", "none") 
     .attr("stroke", "steelblue") 
     .attr("stroke-linejoin", "round") 
     .attr("stroke-linecap", "round") 
     .attr("stroke-width", 1.5) 
     .attr("d", line); 
}); 

} 

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

來源

2017-06-12 Seb

您需要運行本地Web服務器 – sparta93

SVG正在這裏選擇，但它不存在於DOM：

var svg = d3.select("body").append('svg').attr('width', 300).attr('height', 300),

：

var svg = d3.select("svg"),

要麼在html使用D3通過用替換上面的代碼添加svg元素或追加到體

來源

2017-06-12 15:43:22

Javascript d3.js讀取本地CSV文件

回答

相關問題