javascript - 附加到 svg 的圆圈数不正确

Question

目标

• 我正在尝试使用 for 循环 遍历数组中的项目，并使用 jQuery 的 .append() 方法添加一系列圆圈，这些圆圈代表这个特定球员在其职业生涯中的本垒打，在棒球场的四个 svgs 之上，以创建命中率喷射图。

代码笔:

https://codepen.io/onlyandrewn/project/editor/DkaEvW

问题

正确数量的圆圈没有附加到四个 svg，我预计是 48 个红点(职业本垒打)和 22 个红点(上个赛季)。

我尝试过的

• 第 18-21 行:在 for 循环中，我尝试使用 jQuery 根据每个 svg 的类(.layer_1、.layer_2 等)，但似乎点的总数被分配到四个 svg 上，而不是显示所有 48 个点(职业本垒打)或所有 22 个点(赛季本垒打)在一张图表上
• 第 24-31 行:我尝试使用 if 语句仅显示 data[i].game_year 以获得过去 2017 年的本垒打季节，但显示的点不是去年的。
• 也尝试过，将类切换为 id 并使用 each 和 forEach 尝试单独定位父 svg。

脚本.js

$(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();
    }
});

json数据示例

[
  {
    "pitch_type": "four-seam fastball",
    "release_speed": 92.4,
    "game_date": "March 31, 2014",
    "game_year": 2014,
    "des_long": "In the bottom of the 3rd, Marcell Ozuna homers off a 92.4 mph four-seam fastball to left field. A. J. Ellis scores. Christian Yelich scores. Giancarlo Stanton scores.",
    "des_short": "Marcell Ozuna homers on a line drive to left field.",
    "home_team": "MIA",
    "away_team": "COL",
    "balls": 3,
    "strikes": 1,
    "outs_when_up": 0,
    "inning_topbot": "bottom",
    "inning": "3rd",
    "hc_x": 19.08,
    "hc_y": 85.34,
    "hit_distance_sc": "null"
  },

Answer 1

你的做法有点不对。

首先，您不需要为每个圈子都创建一个 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();
      });
    });
  }

Updated Codepen here