当我使用静态数据（第一个数据集变量，在评论中标识为 ATTEMPT #1）时，条形图将正确显示在页面上。但是，当我从 CSV 文件中读取数据（注释掉第一个数据集变量并删除后面注释掉的代码）时，页面上不会显示任何内容。而且我在控制台中没有任何错误。
这是在控制台中对 ATTEMPT #1 的检查，因此您可以看到两个数据集变量的格式相似：
$ dataset.length;
51
$ dataset[0];
[5, "WA"]
这是在控制台中对 ATTEMPT #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 文件中获取值来显示吗？ 提前致谢！