我有一些 JS 代碼用于在頁面上繪制 svg 圓圈。圓圈是基于學校資料的，圓圈的大小取決于 SchoolCapacity 欄位。問題是我的陣列schooldata包含 100 個元素，并且圓圈非常擁擠并且相互重疊。我的問題是如何重寫流程學校資料代碼以顯示地方當局（LA (Name)）和他們的學校能力，而不是把它們畫成圓圈。
學校資料陣列：
const schooldata = [{
"URN": 135691,
"LA (code)": 938,
"LA (name)": "West Sussex",
"EstablishmentNumber": 6228,
"EstablishmentName": "Seadown School",
"SchoolCapacity": 30,
"Postcode": "BN11 2BE"
}, {
"URN": 112080,
"LA (code)": 908,
"LA (name)": "Cornwall",
"EstablishmentNumber": 6084,
"EstablishmentName": "St Ia School",
"SchoolCapacity": 45,
"Postcode": "TR26 2SF"
},
{
"URN": 130842,
"LA (code)": 938,
"LA (name)": "West Sussex",
"EstablishmentNumber": 8003,
"EstablishmentName": "Greater Brighton Metropolitan College",
"SchoolCapacity": "",
"Postcode": "BN12 6NU"
},
JS 業務邏輯
function getcoordinates(postcode) {
let url = "https://api.getthedata.com/postcode/" postcode.replace(" ", " ");
try {
return fetch(url).then(function(response) {
return response.json(); // Process it inside the `then`
});
} catch (error) {
console.log(error);
}
}
//svg setup
var svgns = "http://www.w3.org/2000/svg",
container = document.getElementById('cont');
function drawcircle(easting, northing, size, label, identifier) {
var xScale = (container.width.baseVal.value - 20) / (700000);
var x = 10 (xScale * easting);
var yScale = (container.height.baseVal.value - 20) / (700000);
var y = 10 (yScale * (700000 - northing));
var sizeScale = 100;
var radius = size / sizeScale;
//draw or update the svg circle
var circle = document.getElementById("Circle_" identifier);
if (circle == null) {
circle = document.createElementNS(svgns, 'circle');
}
circle.setAttributeNS(null, 'id', "Circle_" identifier);
circle.setAttributeNS(null, 'cx', x);
circle.setAttributeNS(null, 'cy', y);
circle.setAttributeNS(null, 'r', radius);
circle.setAttributeNS(null, 'style', 'fill: #c6605e; stroke: none; stroke-width: 1px;');
container.appendChild(circle);
//draw or update the circle label
var newText = document.getElementById("Circle_Label_" identifier);
if (newText == null) {
newText = document.createElementNS(svgns, "text");
var textNode = document.createTextNode(label);
newText.appendChild(textNode);
}
newText.setAttributeNS(null, 'id', "Circle_Label_" identifier);
newText.setAttributeNS(null, "x", x);
newText.setAttributeNS(null, "y", y);
newText.setAttributeNS(null, "font-size", "10");
var textNode = document.createTextNode(label);
newText.replaceChild(textNode, newText.childNodes[0]);
container.appendChild(newText);
}
**//process schools data** -- TODO: change to LA instead of schools
let schools = schooldata.reduce(function(allSchools, school) {
allSchools[school.EstablishmentName] = {
SchoolCapacity: school.SchoolCapacity || 0,
coordinates: []
};
getcoordinates(school.Postcode).then(function(data) {
allSchools[school.EstablishmentName].coordinates.push([data.data.easting, data.data.northing]);
drawcircle(data.data.easting, data.data.northing, school.SchoolCapacity, school.EstablishmentName, school.URN);
});
return allSchools
}, {});
HTML
<!DOCTYPE html>
<meta charset="utf-8">
<!-- Create an element where the map will take place -->
<svg id="cont" width="900" height="900"></svg>
我想我需要做一些陣列減少？
uj5u.com熱心網友回復：
首先，使用以下方法將您的學校減少到地方當局Array.reduce()：
const locAuthorities = schooldata.reduce(function (prev, curr) {
const laCode = curr["LA (code)"]
const laName = curr["LA (name)"]
if (prev[laCode]) {
prev[laCode].SchoolCapacity = curr.SchoolCapacity || 0
} else {
prev[laCode] = {
"LA (code)": laCode,
"LA (name)": laName,
"SchoolCapacity": curr.SchoolCapacity,
"Postcode": curr.Postcode,
"URN": curr.URN
}
}
return prev
}, {})
const locAuthoritiesArray = Object.values(locAuthorities)
現在localAuthoritiesArray用來畫圓圈：
locAuthoritiesArray.forEach(function (la) {
getcoordinates(la.Postcode).then(function (data) {
drawcircle(
data.data.easting,
data.data.northing,
la.SchoolCapacity,
la["LA (name)"],
la.URN
);
});
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/446387.html
標籤：javascript 数组 json 分组
下一篇：如何正確執行POST請求？