HTML5 FileReaderのD3.jsグラフへの出力

Question

ローカルのCSVファイルを使用してD3.js円グラフを作成しようとしています。 、

http://zeroviscosity.com/d3-js-step-by-step/step-4-loading-external-data

をこれまでのところ、私が持っている

(function(d3) { 
 
    ...

<input type="file" id="file_input" accept=".csv"/> 
 
    <div id="output_field"></div>  
 
    <script type="text/javascript" src="js/read-csv.js"></script> 
 

 
    <div id="chart"></div> 
 
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
 

：CSVファイルには、単にd3.jsチャートは、単純な円グラフがZeroViscosityで、ここで説明する

label,count 
Monday,379130 
Tuesday,424923 
Wednesday,430728 
Thursday,432138 
Friday,428295 
Saturday,368239 
Sunday,282701 

で構成されてい

データを取得してこれをグラフに渡す方法がわかりません。どのように私はこれを設定するのですか？

Answer 1

ファイルAPIを使用してファイルをデータURLとしてロードします。 tutorialを参照してください。その後、それはd3.csv(url, ...)前と同じように使用できます。

function handleFileSelect(evt) { 
 
    var file = evt.target.files[0]; 
 
    var reader = new FileReader(); 
 
    reader.onload = (function(theFile) { 
 
    return function(e) { 
 
     drawChart(e.target.result); 
 
    }; 
 
    })(file); 
 

 
    reader.readAsDataURL(file); 
 
} 
 

 
document.getElementById('file_input').addEventListener('change', handleFileSelect, false); 
 

 
function drawChart(url) { 
 
    var width = 360; 
 
    var height = 360; 
 
    var radius = Math.min(width, height)/2; 
 
    var donutWidth = 75; 
 
    var legendRectSize = 18; 
 
    var legendSpacing = 4; 
 
    var color = d3.scale.category20b(); 
 
    var svg = d3.select('#chart') 
 
    .append('svg') 
 
    .attr('width', width) 
 
    .attr('height', height) 
 
    .append('g') 
 
    .attr('transform', 'translate(' + (width/2) + 
 
     ',' + (height/2) + ')'); 
 

 
    var arc = d3.svg.arc() 
 
    .innerRadius(radius - donutWidth) 
 
    .outerRadius(radius); 
 

 
    var pie = d3.layout.pie() 
 
    .value(function(d) { 
 
     return d.count; 
 
    }) 
 
    .sort(null); 
 

 
    d3.csv(url, function(error, dataset) { // NEW 
 
    dataset.forEach(function(d) { // NEW 
 
     d.count = +d.count; // NEW 
 
    }); // NEW 
 
    var path = svg.selectAll('path') 
 
     .data(pie(dataset)) 
 
     .enter() 
 
     .append('path') 
 
     .attr('d', arc) 
 
     .attr('fill', function(d, i) { 
 
     return color(d.data.label); 
 
     }); 
 

 
    var legend = svg.selectAll('.legend') 
 
     .data(color.domain()) 
 
     .enter() 
 
     .append('g') 
 
     .attr('class', 'legend') 
 
     .attr('transform', function(d, i) { 
 
     var height = legendRectSize + legendSpacing; 
 
     var offset = height * color.domain().length/2; 
 
     var horz = -2 * legendRectSize; 
 
     var vert = i * height - offset; 
 
     return 'translate(' + horz + ',' + vert + ')'; 
 
     }); 
 
    legend.append('rect') 
 
     .attr('width', legendRectSize) 
 
     .attr('height', legendRectSize) 
 
     .style('fill', color) 
 
     .style('stroke', color); 
 

 
    legend.append('text') 
 
     .attr('x', legendRectSize + legendSpacing) 
 
     .attr('y', legendRectSize - legendSpacing) 
 
     .text(function(d) { 
 
     return d; 
 
     }); 
 
    }); 
 
}

<input type="file" id="file_input" accept=".csv" /> 
 
<div id="output_field"></div> 
 

 
<div id="chart"></div> 
 
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>