Question

我创建了一个条形图，创建了一个新的csv，它是更大的数据集的一部分。我现在想要使用原始数据集中的数据来绘制我的条形图，只选择两列（Ward和Unemploymet）和一个月的数据。我该怎么做？

代码如下：

<!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

我希望能够更改代码，从更大的csv中选择数据集的这一部分，其中包括56行和6列。有人可以帮我这个吗？提前致谢。

Answer 1

您可以过滤csv以在将数据传递给d3之前创建数据的子集。

在d3.csv调用的顶部执行类似

的操作

var newData = data.filter(filterCriteria);

并且有一个filterCriteria函数，它根据你想要显示的内容返回true或false：

function filterCriteria(d) {
    return d.month === targetMonth;
}

targetMonth等于您要展示的月份。

然后将newData传递给d3。

在d3.js中从CSV中选择一部分数据

1 个答案: