0
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;
}
}
此腳本創建幾個SVG元素動態地在div內進行。這些元素中的每一個都使用x和y座標具有不同的像素偏移量，如地圖上的位置。
每次通過下拉菜單選擇新選項時，都會加載一組新的位置。
你可以在這裏看到我將原始座標由10萬億，使它們更易於管理的逐像素：
var x = systemData.position.x/100000000000000;
var y = systemData.position.y/100000000000000;
這個偉大的工程，但問題是，甚至還在一些選擇，偏移量非常大以至於生成的SVG元素被推到視口外。我有點採取最負座標和添加這些值，這（在大多數情況下）對齊的元素在左上開始偏移反駁這一點，因爲在這裏看到：
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或更多，我正在尋找一種奇特的方式來應對這種情況。