0
当我使用静态数据（第一个数据集变量，在注释中标识为ATTEMPT＃1）时，条形图将在页面上正确显示。但是，当我从CSV文件读取数据（注释掉第一个数据集变量并删除后面注释掉的代码）时，页面上将不显示任何内容。我在控制台中没有任何错误。D3.js - CSV中的数据不显示，静态数据将
这里的尝试＃1在控制台的检查，所以你可以看到这两个数据集变量是类似的格式：
$ dataset.length;
51
$ dataset[0];
[5, "WA"]
这里的尝试＃2在控制台检查：
$ dataset.length;
50
$ dataset[0];
[35.6, "Alabama"]
这里是/index.html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3: An HTML div tooltip</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
rect:hover {
fill: orange;
}
#tooltip {
position: absolute;
width: 200px;
height: auto;
padding: 10px;
background-color: white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
pointer-events: none;
}
#tooltip.hidden {
display: none;
}
#tooltip p {
margin: 0;
font-family: sans-serif;
font-size: 16px;
line-height: 20px;
}
</style>
</head>
<body>
<div id="tooltip" class="hidden">
<p><strong id="tool_header">State</strong> State</p>
<p><span id="value">100</span> Per Inc Per Capita (000)</p>
</div>
<script type="text/javascript">
//Width and height
var w = 600;
var h = 250;
// ATTEMPT #1 - Displays correctly
var dataset = [ [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"]];
/* ATTEMPT #2 - Won't display anything
var dataset = [];
// Save state info object into dataset array
d3.csv("2012_PersonalIncomePerCapitaByState.csv", function(d) {
// Store state and income (in 1,000's)
for (var i = 0; i < d.length; i++) {
dataset.push([Math.round(parseInt(d[i].Income)/100)/10, d[i].State]);
}
});
*/
var xScale = d3.scale.ordinal()
.domain(d3.range(dataset.length))
.rangeRoundBands([0, w], 0.05);
var yScale = d3.scale.linear()
.domain([d3.min(dataset, function(d) { return d[0]; })/1.2, d3.max(dataset, function(d) { return d[0]; }) * 1.05])
.range([0, h]);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Create bars
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
return xScale(i);
})
.attr("y", function(d) {
return h - yScale(d[0]);
})
.attr("width", xScale.rangeBand())
.attr("height", function(d) {
return yScale(d[0]);
})
.attr("fill", function(d) {
return "rgb(0, 0, " + (d[0] * 10) + ")";
})
.on("mouseover", function(d) {
//Get this bar's x/y values, then augment for the tooltip
var xPosition = parseFloat(d3.select(this).attr("x")) + xScale.rangeBand()/2;
var yPosition = parseFloat(d3.select(this).attr("y"))/2 + h/2;
//Update the tooltip position and value
d3.select("#tooltip")
.style("left", xPosition + "px")
.style("top", yPosition + "px")
.select("#value")
.text(d[0]);
d3.select("#tooltip")
.select("#tool_header")
.text(d[1]);
//Show the tooltip
d3.select("#tooltip").classed("hidden", false);
})
.on("mouseout", function() {
//Hide the tooltip
d3.select("#tooltip").classed("hidden", true);
})
.on("click", function() {
sortBars();
});
//Define sort order flag
var sortOrder = false;
//Define sort function
var sortBars = function() {
//Flip value of sortOrder
sortOrder = !sortOrder;
svg.selectAll("rect")
.sort(function(a, b) {
if (sortOrder) {
return d3.ascending(a, b);
} else {
return d3.descending(a, b);
}
})
.transition()
.delay(function(d, i) {
return i * 50;
})
.duration(1000)
.attr("x", function(d, i) {
return xScale(i);
});
};
</script>
</body>
</html>
这里的2012_PersonalIncomePerCapitaByState.csv文件：
State,Income
Alabama,35625
Alaska,46778
Arizona,35979
Arkansas,34723
California,44980
Colorado,45135
Connecticut,58908
Delaware,41940
Florida,40344
Georgia,36869
Hawaii,44024
Idaho,33749
Illinois,44815
Indiana,36902
Iowa,42126
Kansas,41835
Kentucky,35041
Louisiana,39413
Maine,39481
Maryland,51971
Massachusetts,54687
Michigan,37497
Minnesota,46227
Mississippi,33073
Missouri,39049
Montana,37370
Nebraska,43143
Nevada,37361
New Hampshire,47058
New Jersey,53628
New Mexico,35079
New York,52095
North Carolina,37049
North Dakota,51893
Ohio,39289
Oklahoma,39006
Oregon,38786
Pennsylvania,43616
Rhode Island,44990
South Carolina,34266
South Dakota,43659
Tennessee,37678
Texas,41471
Utah,34601
Vermont,42994
Virginia,47082
Washington,45413
West Virginia,34477
Wisconsin,40537
Wyoming,48670
你能帮助我弄清楚为什么我无法从CSV文件获取值显示？提前致谢！
如果以发布方式运行代码，则不会显示任何内容，因为'd3.csv'是异步回调。也就是说，之后的代码会在数据实际定义之前立即执行。尝试将所有代码放在'd3.csv'中。 –
哇！业余的错误，感谢您的发现！ – Abundnce10