for loop迭代数组中的项目并使用jQuery的.append()方法添加一系列圆圈，代表这个特定的玩家＆＃39他们的职业生涯在他们的职业生涯中，在一个棒球场的四个svgs之上运行，以创建一个命中的喷雾图。https://codepen.io/onlyandrewn/project/editor/DkaEvW
四个svgs中没有附加正确的圆圈数量，我预计这将是48个红点（职业本垒打）和22个红点（上个赛季）。
.layer_1，{{1}定位每个svgs但是，似乎总点数被划分为四个svgs，而不是全部48个点（职业本垒打）或全部22个（本垒打）出现在一个图表上.layer_2，以便从2017赛季过去获得本垒打，但是正好是显示的不是过去一年。data[i].game_year和each尝试单独定位父svgs。forEach$(function(){
// Make a GET request with an AJAX call to fetch data from the json file, which contains stats on Marcell Ozuna's career homeruns from MLB Statcast via BaseballSavant.com
// Documentation: http://api.jquery.com/jquery.ajax/
// Example GET request: https://stackoverflow.com/questions/9269265/ajax-jquery-simple-get-request
$.ajax({
url: 'ozuna.json',
method: 'GET',
dataType: "json",
}).then(function(data){
for (i = 0; i < data.length; i++) {
// On each of the SVG's of the baseball stadiums, use a for loop to iterate over each of the 48 items in the array. Then, append a circle with a class of `homerun` to the div.
$(".layer_1").append("<svg><circle class='homerun'></svg>");
$(".layer_2").append("<svg><circle class='homerun'></svg>");
$(".layer_3").append("<svg><circle class='homerun'></svg>");
$(".layer_4").append("<svg><circle class='homerun'></svg>");
// Marcell Ozuna hit a total of 22 homeruns last season
// if (data[i].game_year === 2017) {
// // console.log(data[i].game_year);
// // $(".layer_2").append("<svg><circle class='homerun'></svg>");
// // $(".layer_3").append("<svg><circle class='homerun'></svg>");
// } else {
// // $(".layer_1").append("<svg><circle class='homerun'></svg>");
// // $(".layer_4").append("<svg><circle class='homerun'></svg>");
// }
// This refers to each of the circles. Each of the circles contains the following attributes. The user sees a small red dot with a black border.
$(".homerun").each(function(index){
$(this).attr({
cx: data[index].hc_x,
cy: data[index].hc_y,
r: 4.71,
fill: "#a82254",
stroke: "#000",
"stroke-width": 1,
})
$(this).hover(function(){
changeText(data, index);
showSidebar();
})
});
}
});
// When you hover over one of the circles, change the text in the sidebar. It takes two parameters, the data from the AJAX call and the index of the object in the array.
function changeText(data, index) {
$(".sidebar__date").html(data[index].game_date);
$(".team--home").html(data[index].home_team);
$(".team--away").html(data[index].away_team);
$(".sidebar__tb").html(data[index].inning_topbot);
$(".sidebar__inning").html(data[index].inning);
$(".sidebar__description").html(data[index].des_long);
$(".sidebar__pitch").html(data[index].pitch_type);
$(".value--balls").html(data[index].balls);
$(".value--strikes").html(data[index].strikes);
$(".value--outs").html(data[index].outs_when_up);
}
// Show the game details. By default, the sidebar is empty and a user will see only the attribution until they hover over the first red dot.
function showSidebar() {
$(".sidebar").show();
}
});
答案 0 :(得分：3)
你的方法有点不对。
首先，您不需要为每个圆创建一个SVG。只需在SVG中添加圆圈即可。对于每个球场图像，循环数据，如果是正确的年份，请添加一个圆圈。
$.ajax({
url: 'ozuna.json',
method: 'GET',
dataType: "json",
}).then(function(data){
// Marlins Park
addHomeRuns(data, '.layer_1', 'all');
addHomeRuns(data, '.layer_2', 2017);
// Busch
addHomeRuns(data, '.layer_3', 'all');
addHomeRuns(data, '.layer_4', 2017);
});
// On each of the SVG's of the baseball stadiums, use a for loop to iterate over each of the 48 items in the array. Then, append a circle with a class of `homerun` to the div.
function addHomeRuns(data, layerClass, year)
{
var svg = $(layerClass).get(0);
$.each(data, function(i, obj) {
var showHomer = year === 'all' || obj.game_year === year;
if (showHomer)
{
var circle = document.createElementNS(svg.namespaceURI, 'circle');
circle.setAttribute('cx', obj.hc_x);
circle.setAttribute('cy', obj.hc_y);
circle.setAttribute('r', 4.71);
circle.setAttribute('fill', "#a82254");
circle.setAttribute('stroke', "#000");
circle.setAttribute('stroke-width', 1);
svg.appendChild(circle);
}
$(circle).hover(function() {
changeText(obj);
showSidebar();
});
});
}
答案 1 :(得分：1)
您在javascript中使用了classname layer_1，在html中使用了大写Layer_1。由于jQuery选择器区分大小写，因此这可能是主要问题。