Javascript D3.js条形图问题与数据更新
我有一个学生详细资料和他们数学成绩的数据集。 我正在尝试创建一个条形图，其中x轴表示成绩（可以在0到20之间），y轴表示有这个成绩的学生人数。 我想显示所选学校的数据。 当为GP学校设置图表时，图表看起来正常： 但当我将数据更新到第二所学校（“MS”）时，图表如下所示： 链接到我正在使用的数据集： 我的代码：Javascript D3.js条形图问题与数据更新,javascript,html,d3.js,Javascript,Html,D3.js,我有一个学生详细资料和他们数学成绩的数据集。 我正在尝试创建一个条形图，其中x轴表示成绩（可以在0到20之间），y轴表示有这个成绩的学生人数。 我想显示所选学校的数据。 当为GP学校设置图表时，图表看起来正常： 但当我将数据更新到第二所学校（“MS”）时，图表如下所示： 链接到我正在使用的数据集： 我的代码： <!DOCTYPE html> <html lang="en"> <head> <title>Projec
<!DOCTYPE html>
<html lang="en">
<head>
<title>Project</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body {
text-align: center;
font-family: tahoma;
font-size: 14px;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.bar { fill: steelblue; }
.tooltip {
position: absolute;
width: 200px;
height: 28px;
pointer-events: none;
font-weight : bold;
}
</style>
</head>
<body>
<!-- Add 2 buttons -->
<button onclick="update('GP')">Grades by GP school</button>
<button onclick="update('MS')">Grades by MS school</button>
<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>
<script>
// set the dimensions and margins of the graph
var margin = {top: 30, right: 30, bottom: 70, left: 60},
width = 460 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// Initialize the X axis
var x = d3.scaleBand()
.range([ 0, width ])
.padding(0.2);
var xAxis = svg.append("g")
.attr("transform", "translate(0," + height + ")")
// Initialize the Y axis
var y = d3.scaleLinear()
.range([ height, 0]);
var yAxis = svg.append("g")
.attr("class", "myYaxis")
var tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
// A function that create / update the plot for a given variable:
function update(selectedVar) {
var arr = [];
// Parse the Data
d3.csv("student-mat.csv", function(data) {
//data = data.filter(function(d){ return d.school == selectedVar })
data = data.filter(function(row) {
return row['school'] == selectedVar;
})
data.map(function(d){
arr.push(+d.G3);
});
console.log(arr);
var counts = {};
for (var i = 0; i < arr.length; i++) {
var num = arr[i];
counts[num] = counts[num] ? counts[num] + 1 : 1;
}
var test = [];
for (const [key, value] of Object.entries(counts)) {
test.push({name:key,score:value});
}
console.log(test);
// X axis
x.domain(test.map(function(d) { return d.name; }))
xAxis.transition().duration(1000).call(d3.axisBottom(x))
// Add Y axis
y.domain([0, d3.max(test, function(d) { return d.score}) ]);
yAxis.transition().duration(1000).call(d3.axisLeft(y));
// variable u: map data to existing bars
var u = svg.selectAll("rect")
.data(test)
// update bars
u
.enter()
.append("rect")
.merge(u)
.transition()
.duration(1000)
.attr("x", function(d) { return x(d.name); })
.attr("y", function(d) { return y(d.score); })
.attr("width", x.bandwidth())
.attr("height", function(d) { return height - y(d.score); })
.attr("fill", "#69b3a2")
})
}
// Initialize plot
update('GP')
</script>
</body>
</html>
项目
身体{
文本对齐：居中；
字体系列：tahoma；
字体大小：14px；
}
.轴线路径，
.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
.x轴路径{
显示：无；
}
.bar{fill:steelblue；}
.工具提示{
位置：绝对位置；
宽度：200px；
高度：28px；
指针事件：无；
字体大小：粗体；
}
普通科学校的成绩
MS学校的成绩
//设置图形的尺寸和边距
var margin={顶部：30，右侧：30，底部：70，左侧：60}，
宽度=460-margin.left-margin.right，
高度=400-margin.top-margin.bottom；
//将svg对象附加到页面主体
var svg=d3。选择（“我的数据维”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
//初始化X轴
var x=d3.scaleBand（）
.范围（[0，宽度]）
.填充（0.2）；
var xAxis=svg.append（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
//初始化Y轴
变量y=d3.scaleLinear（）
.范围（[高度，0]）；
var yAxis=svg.append（“g”）
.attr（“类”、“粘虫”）
变量工具提示=d3。选择（“主体”）。追加（“div”）
.attr（“类”、“工具提示”）
.样式（“不透明度”，0）；
//为给定变量创建/更新绘图的函数：
函数更新（selectedVar）{
var-arr=[]；
//解析数据
d3.csv（“学生材料”csv），函数（数据）{
//data=data.filter（函数（d）{return d.school==selectedVar}）
data=data.filter（函数（行）{
返回行['school']==selectedVar；
})
数据映射（函数（d）{
方位推力（+d.G3）；
});
控制台日志（arr）；
变量计数={}；
对于（变量i=0；i如何使MS学校图形与GP学校图形完全相同？您能否在
var u=svg.selectAll（“rect”）.data（test）console.log（text）