我尝试使用本地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>
&#13;
我不确定如何获取数据,然后将其传递给图表。我该如何设置呢?
答案 0 :(得分:4)
使用文件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;
});
});
}
&#13;
<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>
&#13;