静的データ (コメントで ATTEMPT #1 として識別される最初のデータセット変数) を使用すると、棒グラフがページに正しく表示されます。ただし、CSV ファイルからデータを読み込むと (最初のデータセット変数をコメントアウトし、その後のコメントアウトされたコードを削除すると)、ページに何も表示されません。また、コンソールにエラーは表示されません。
以下は、コンソールでの ATTEMPT #1 の検査です。2 つのデータセット変数が同様の形式であることがわかります。
$ 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 ファイルから値を取得して表示できない理由を教えてください。 前もって感謝します！