HTML5 FileReader输出到D3.js图表

Question

HTML5 FileReader输出到D3.js图表

3

我将尝试使用本地CSV文件来填充我的D3.js饼图。该CSV文件仅由以下内容组成：

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

图表是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>

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

- codedawg82

那么，代码在哪里？ - Ismael Miguel

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Fabricator · Accepted Answer

使用文件API将文件加载为数据URL。请参见教程。然后，它可以像以前一样使用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>