Question

Codepen：https://codepen.io/anon/pen/LjxNGj

使用Javascript：

$(document).ready(function() {
    var regions = '../js/json/eveRegions.json';
    var systems = '../js/json/eveSystems.json';

    var constellations = [];

    var displayedSystems = [];
    var arrayX = [];
    var arrayY = [];

    function getRegions() {
        $.getJSON(regions, function(data) {

            data.forEach(function(regionData) {
                $('#regionSelect').append("<option id="+regionData.region_id+">"+regionData.name+"</option>")
            });       
        });
    }

    $('#regionSelect').change(function() {
        var selectedRegion = $(this).val();
        constellations = [];

        displayedSystems = [];
        arrayX = [];
        arrayY = [];

        $('#container').empty();

        $.getJSON(regions, function(data) {

            data.forEach(function(regionData) {

                if (selectedRegion == regionData.name) {
                    console.log(regionData);

                    regionData.constellations.forEach(function(constellation) {
                        constellations.push(constellation);
                    });
                    console.log(constellations);
                    getSystems();
                }
            });
        });
    });

    function getSystems() {
        $.getJSON(systems, function(data) {
            var systemCount = data.length;
            var index = 0;

            data.forEach(function(systemData) {
                index++;

                if(constellations.indexOf(systemData.constellation_id) > -1) {
                    var x = systemData.position.x / 100000000000000;
                    var y = systemData.position.y / 100000000000000;

                    arrayX.push(x);
                    arrayY.push(y);
                    displayedSystems.push(systemData);
                }

                if (index === systemCount) {
                    generateSystems();
                }
            });       
        });
    }

    function generateSystems() {
        var lowestX = Math.min.apply(Math, arrayX);
        var lowestY = Math.min.apply(Math, arrayY);
        var offsetX = Math.abs(lowestX);
        var offsetY = Math.abs(lowestY);

        displayedSystems.forEach(function(data) {
            var x = data.position.x / 100000000000000;
            var y = data.position.y / 100000000000000;
            var coordX = x + offsetX;
            var coordY = y + offsetY;

            var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
            svg.setAttribute('id', data.name);
            svg.setAttribute('title', data.name);
            svg.setAttribute('class', 'system');
            svg.setAttribute('constellation-id', data.constellation_id);
            svg.setAttribute('style', 'margin-top:'+coordY+'px;margin-left:'+coordX+'px');
            svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
            document.getElementById('container').appendChild(svg);
        });
    }

    getRegions();

    $('#container').panzoom();
});

HTML：

<body>
      <select id="regionSelect"></select>
      <div id="container"></div>
    </body>

CSS：

select {
  position: absolute;
}

#container {

  .system {
    width: 4px;
    height: 4px;
    background: grey;
    border-radius: 12px;
    position: absolute;

    &:hover {
      background: red;
    }
  }

  .label {
    position: absolute;
    font-size: 10px;
  }
}

这个脚本动态地在div中创建几个SVG元素。这些元素中的每一个都使用x和y坐标具有不同的像素偏移，就像地图上的位置一样。

每次通过下拉列表选择新选项时，都会加载一组新位置。

你可以在这里看到我将原始坐标除以10万亿，使它们在像素方面更易于管理：

var x = systemData.position.x / 100000000000000;
                    var y = systemData.position.y / 100000000000000;

这很好用，但问题是即使在某些选择中，偏移也很大，生成的SVG元素会被推到视口之外。我通过获取最负的坐标并将这些值添加到偏移量（在大多数情况下）从topLeft开始对齐元素来解决这个问题，如下所示：

var lowestX = Math.min.apply(Math, arrayX);
        var lowestY = Math.min.apply(Math, arrayY);
        var offsetX = Math.abs(lowestX);
        var offsetY = Math.abs(lowestY);

        displayedSystems.forEach(function(data) {
            var x = data.position.x / 100000000000000;
            var y = data.position.y / 100000000000000;
            var coordX = x + offsetX;
            var coordY = y + offsetY;

我正在寻找的是绘制这些位置/元素的不同方式，以便它们始终位于主视口内。简单来说，现在有些元素的边距高达1000px或更高，我正在寻找一种对抗它的奇特方式。

Answer 1

首先，我建议您只获取一次区域和系统数据..这会让您的用户更加快乐。

但是，要回答您的问题，如果将最小的X和Y值乘以-1（以有效地使它们成为0,0原点），那么您将确保为区域显示的每个系统都以最小的位置开始。 x为0px，最小position.y为0px。

希望这有帮助！

$(document).ready(function() {
    var regions = '../js/json/eveRegions.json';
    var systems = '../js/json/eveSystems.json';

    var regionData = [];
    var systemData = [];

    var constellations = [];

    var displayedSystems = [];
    var arrayX = [];
    var arrayY = [];

    $('#regionSelect').change(function() {
        var selectedRegion = $(this).val();
        constellations = [];    
        displayedSystems = [];

        arrayX = [];
        arrayY = [];

        $('#container').empty();

        var filteredRegions = regionData.filter((r) => selectedRegion == r.name);
        filteredRegions.forEach((r) => {
            console.log(r);
            r.constellations.forEach((c) => constellations.push(c));
            console.log(constellations);
            getRegionSystems();
        });
    });

    function getRegionSystems() {
        // Clear out the previously displayed systems so we don't keep building the list
        displayedSystems = systemData.filter((s) => constellations.indexOf(s.constellation_id) > -1);
        displayedSystems.forEach((s) => {
            var x = s.position.x / 100000000000000;
            var y = s.position.y / 100000000000000;
            arrayX.push(x);
            arrayY.push(y);
        });
        generateSystems();
    }

    function generateSystems() {
        var lowestX = Math.min.apply(Math, arrayX);
        var lowestY = Math.min.apply(Math, arrayY);
        var offsetX = -1 * lowestX;
        var offsetY = -1 * lowestY;

        displayedSystems.forEach(function(data) {
            var x = data.position.x / 100000000000000;
            var y = data.position.y / 100000000000000;
            var coordX = x + offsetX;
            var coordY = y + offsetY;

            var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
            svg.setAttribute('id', data.name);
            svg.setAttribute('title', data.name);
            svg.setAttribute('class', 'system');
            svg.setAttribute('constellation-id', data.constellation_id);
            svg.setAttribute('style', 'margin-top:'+coordY+'px;margin-left:'+coordX+'px');
            svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
            document.getElementById('container').appendChild(svg);
        });
    }

    function getRegions() {
        $.getJSON(regions, function(data) {

            data.forEach(function(regionData) {
                $('#regionSelect').append("<option id="+regionData.region_id+">"+regionData.name+"</option>")
            });    
            regionData = data;   
        });
    }

    function getSystems() {
        $.getJSON(systems, function(data) {
            systemData = data;
        });
    }

    getRegions();
    getSystems();

    // $('#container').panzoom();
});

将元素动态移动到视口内部

1 个答案: