<!-- source is https://bl.ocks.org/mbostock/4060366 --> <!DOCTYPE html> <html> <meta charset="utf-8"> <style> .links { stroke: #000; stroke-opacity: 0.2; } .polygons { fill: none; stroke: #000; } .polygons :first-child { fill: #f00; } .sites { fill: #000; stroke: #fff; } .sites :first-child { fill: #fff; } </style> <body> <script src="https://d3js.org/d3.v5.min.js"></script> <script> var mapData = { "mapName" : "Piana", "xSizePix" : 900, "ySizePix" : 900, "mapScale" : 55, "xExitPoint" : 600, "yExitPoint" : 300, "places": [ { "id": 34, "type": "building", "name": "Świątynia", "color": "#555", "x": -2, "y": 2 }, { "id": 35, "type": "building", "name": "Świątynia", "color": "#555", "x": -2, "y": 1 }, { "id": 118, "type": "building", "name": "Poczta", "color": "#f43", "x": -8, "y": -1 }, { "id": 0, "type": "road", "name": "furtka", "color": "#aaa", "x": -0, "y": 0 }, { "id": 1, "type": "road", "name": "droga", "color": "#aaa", "x": -1, "y": 0 }, { "id": 2, "type": "road", "name": "droga", "color": "#aaa", "x": -2, "y": 0 }, { "id": 3, "type": "road", "name": "droga", "color": "#aaa", "x": -3, "y": 1 }, { "id": 4, "type": "road", "name": "droga", "color": "#aaa", "x": -4, "y": 2 }, { "id": 5, "type": "road", "name": "droga", "color": "#aaa", "x": -5, "y": 2 }, { "id": 54, "type": "road", "name": "pomost", "color": "#a55", "x": -4, "y": 3 }, { "id": 58, "type": "road", "name": "droga", "color": "#aaa", "x": -6, "y": 1 }, { "id": 587, "type": "building", "name": "Sklep", "color": "#777", "x": -7, "y": 1 }, { "id": 6, "type": "road", "name": "droga", "color": "#aaa", "x": -6, "y": 3 }, { "id": 7, "type": "road", "name": "droga", "color": "#aaa", "x": -7, "y": 3 }, { "id": 71, "type": "road", "name": "droga", "color": "#aaa", "x": -7, "y": 2 }, { "id": 75, "type": "building", "name": "Gospoda", "color": "#777", "x": -7, "y": 4 }, { "id": 76, "type": "road", "name": "pomost", "color": "#a55", "x": -8, "y": 4 }, { "id": 8, "type": "road", "name": "droga", "color": "#aaa", "x": -8, "y": 2 }, { "id": 81, "type": "road", "name": "droga", "color": "#aaa", "x": -8, "y": 1 }, { "id": 86, "type": "road", "name": "pomost", "color": "#a55", "x": -9, "y": 3 }, { "id": 9, "type": "road", "name": "droga", "color": "#aaa", "x": -9, "y": 1 }, { "id": 10, "type": "road", "name": "droga", "color": "#aaa", "x": -8, "y": 0 }, { "id": 11, "type": "road", "name": "droga", "color": "#aaa", "x": -7, "y": 0 }, { "id": 12, "type": "road", "name": "droga", "color": "#aaa", "x": -6, "y": -1 }, { "id": 121, "type": "building", "name": "chata", "color": "#aaa", "x": -6, "y": -2 }, { "id": 13, "type": "road", "name": "droga", "color": "#aaa", "x": -5, "y": -1 }, { "id": 135, "type": "building", "name": "Gospoda", "color": "#777", "x": -5, "y": 0 }, { "id": 136, "type": "building", "name": "Gospoda", "color": "#777", "x": -5, "y": 1 }, { "id": 14, "type": "road", "name": "droga", "color": "#aaa", "x": -4, "y": 0 }, { "id": 15, "type": "road", "name": "droga", "color": "#aaa", "x": -3, "y": 0 } ], "joints": [ [0,1],[1,2],[2,3],[3,4],[3,34],[4,5],[5,6],[5,54],[5,58],[58,587],[6,7], [7,8],[7,71],[7,75],[7,76],[8,9],[8,81],[8,86],[9,10],[10,11],[11,12], [11,58],[11,118],[12,13],[12,121],[13,14],[13,135],[135,136],[14,15], [15,2],[34,35] ] }; var bodySelect = d3.select("body"); var svgCanvas = bodySelect.append("svg") .attr("width", mapData.xSizePix) .attr("height", mapData.ySizePix); svgCanvas.selectAll("line") .data(mapData.joints) .enter() .append("line") .attr("x1", function(d) {return elScreenCentrPosX(d[0])}) .attr("y1", function(d) {return elScreenCentrPosY(d[0])}) .attr("x2", function(d) {return elScreenCentrPosX(d[1])}) .attr("y2", function(d) {return elScreenCentrPosY(d[1])}) .attr("stroke-width", 6) .style("stroke", function(d) {return elGetColor(d[0])}) ; svgCanvas.selectAll("rect") .data(mapData.places) .enter() .append("rect") .attr("x", function(d) {return elScreenPosX(d.x, d.type)}) .attr("y", function(d) {return elScreenPosY(d.y, d.type)}) .attr("height", function(d) {return elScreenSize(d.type)}) .attr("width", function(d) {return elScreenSize(d.type)}) .attr("rx", function(d) {return elRoundRadi(d.type)}) .attr("ry", function(d) {return elRoundRadi(d.type)}) .attr("fill", function(d) {return d.color}) .attr("stroke", "black") ; svgCanvas.selectAll("text") .data(mapData.places) .enter() .append("text") .attr("x", function(d) {return elScreenPosX(d.x, d.type)+5}) .attr("y", function(d) {return elScreenPosY(d.y, d.type)+15}) .text(function(d) {return d.id}) ; function elGetColor(placeId){ var color = "black"; for (var i of mapData.places){ if (i.id == placeId) { color = i.color; } }; return color; } function elScreenPosX(unscaledPos, type){ var delta = (mapData.mapScale - elScreenSize(type))/2; return mapData.xExitPoint + unscaledPos * mapData.mapScale + delta; } function elScreenPosY(unscaledPos, type){ var delta = (mapData.mapScale - elScreenSize(type))/2; return mapData.yExitPoint + unscaledPos * mapData.mapScale + delta; } function elScreenCentrPosX(placeId){ var centrPos = 0; for (var i of mapData.places){ if (i.id == placeId) { centrPos = i.x * mapData.mapScale + mapData.xExitPoint + mapData.mapScale/2; } }; return centrPos; } function elScreenCentrPosY(placeId){ var centrPos = 0; for (var i of mapData.places){ if (i.id == placeId) { return i.y * mapData.mapScale + mapData.yExitPoint + mapData.mapScale/2; } }; return centrPos; } function elScreenSize(type){ if (type == "building") return 50; if (type == "road") return 40; return 5; } function elRoundRadi(type){ if (type == "building") return 5; if (type == "road") return 1; return 0; } function elColor(type){ if (type == "building") return 5; if (type == "road") return 1; return 0; } </script> </body> </html>
We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy. Accept Learn more
