javascript - HTML5 FileReader 输出到 D3.js 图表

Question

我正在尝试使用本地 CSV 文件来填充我的 D3.js 饼图。 CSV 文件仅包含

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

d3.js 图表是 ZeroViscosity 上解释的简单饼图:

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>
     

我不确定如何获取数据然后将其传递给图表。我该如何设置？

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>