我通过创建一个新的 csv 创建了一个条形图，该 csv 是更大数据集的一部分。我现在想使用原始数据集中的数据通过仅选择两列(沃德和失业)和一个月的数据来绘制条形图。我该怎么做？
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Unemployment by Ward Bar Chart</title>
<style type="text/css">
.axis text{
font-family: Arial;
font-size: 13px;
color: #333333;
text-anchor: end;
}
.axis path{
fill:none;
stroke:#333333 ;
stroke-width: 1.5px;
shape-rendering: crispEdges
font-family: Arial;
}
.bar{
stroke: none;
fill: #012C3B;
}
.textlabel{
font-family: Arial;
font-size:13px;
color: #333333;
text-anchor: middle;
}
</style>
</head>
<body>
<script type="text/javascript" src="d3/d3.js"></script>
<script>
var margin = {top:20, right:0, bottom:60, left:60},
width = 475;
height = 350;
padding = 100;
var svg = d3.select("body")
.append("svg")
.attr("width", "30%")
.attr("height", "70%")
.attr("viewBox", "0 0 " + width + " " + height);
var yScale = d3.scale.linear()
.range([height - margin.top - margin.bottom, 0]);
var xScale = d3.scale.ordinal()
.rangeRoundBands([0, width - margin.right - margin.left], .1);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.tickFormat(function(d) {return d + "%"})
d3.csv("Unemployment.csv", function(error, data)
{
//map function goes through every element, then returns a number for Unemployment
data = data.map(function(d){
d["Unemployment"] = +d["Unemployment"];
return d;
});
//yscale's domain is from zero to the maximum "Unemployment"
yScale.domain([0, d3.max(data, function(d){ return d["Unemployment"]; })]);
//xscale is unique values in Ward (Ward, since they are all different)
xScale.domain(data.map(function(d){ return d["Ward"]; }));
svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.attr("class", "bar")
.attr("x", function(d){ return xScale(d["Ward"]); })
.attr("y", function(d){ return yScale(d["Unemployment"]); })
.attr("height", function(d){ return height - margin.top - margin.bottom - yScale(d["Unemployment"]); })
.attr("width", function(d){ return xScale.rangeBand(); })
.style("font-family", "Arial");
//adding y axis to the chart
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.call(yAxis)
.style("color", "#333333")
.style("font-family", "Arial");
//adding x axis to the bottom of chart
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(" + margin.left + "," + (height - margin.bottom) + ")")
.call(xAxis)
.style("color", "#333333")
.style("font-family", "Arial");
//bar labels
svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.selectAll(".textlabel")
.data(data)
.enter()
.append("text")
.attr("class", "textlabel")
.style("font-family", "Arial")
.style("font-size", "15px")
.attr("x", function(d){ return xScale(d["Ward"]) + (xScale.rangeBand()/2); })
.attr("y", function(d){ return yScale(d["Unemployment"]) - 3 ; })
.text(function(d){ return (d["Unemployment"] + "%"); });
// Y-axis labels
svg.append("text")
.attr("text-anchor", "middle")
.style("font-size", "13px")
.style("color", "#333333")
.attr("transform", "translate ("+ (padding/4) + "," +(height/2)+") rotate(-90)")
.text("Unemployment")
.style("font-family", "Arial");
// X-axis labels
svg.append("text")
.attr("text-anchor", "middle")
.style("font-size", "13px")
.style("color", "#333333")
.attr("transform", "translate("+ (width/2) + "," +(height-(padding/4)) + ")")
.text("Ward")
.style("font-family", "Arial");
//title for the chart
svg.append("text")
.attr("text-anchor", "middle")
.style("font-size", "16px")
.style("color", "#333333")
.attr("transform", "translate("+ (width/3.78) + "," +(height/30) + ")")
.text("Unemployment by Ward")
.style("font-family", "Arial");
//source
svg.append("text")
.attr("text-anchor", "middle")
.style("font-size", "13px")
.style("color", "#333333")
.attr("transform", "translate("+ (width/3.2) + "," +(height/1) + ")")
.text("Source:Bureau of Labor Statistics")
.style("font-family", "Arial")
})
</script>
</body>
</html
用于此目的的 CSV 是:
Ward Unemployment
1 4.5
2 4.3
3 4
4 5.7
5 7.9
6 5.2
7 11
8 14.2
我希望能够更改代码以从包含 56 行和 6 列的更大 csv 中选择这部分数据集。有人可以帮我解决这个问题吗？提前致谢。
最佳答案
您可以过滤 csv 以创建数据子集，然后再将其传递到 d3。
在 d3.csv 调用的顶部执行类似的操作
var newData = data.filter(filterCriteria);
并有一个 filterCriteria 函数，根据您想要显示的内容返回 true 或 false:
function filterCriteria(d) {
return d.month === targetMonth;
}
其中 targetMonth 等于您要显示的月份。
然后将newData传递给d3。
关于javascript - 在 d3.js 中从 CSV 中选择一段数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36314656/