Rockingcool/india-translator
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Styling changes to Resize SVG #1

Merged
Rockingcool merged 7 commits from resizeSvg into master 2025-04-12 10:58:22 -05:00
Conversation 0 Commits 7 Files Changed 2 +50 -9
3 changed files with 50 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit bf8825294b - Show all commits

2
index.html
View File

@@ -19,7 +19,7 @@
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
justify-content: space-evenly; justify-content: space-evenly;
gap: 10% 10%; gap: 2em 2em;
} }
svg { svg {

12
index.js
View File

@@ -213,19 +213,21 @@ function stateOrDistrictOrLanguage(d) {
// const mapWidth = document.getElementById("indiaMap").getAttribute("width") // const mapWidth = document.getElementById("indiaMap").getAttribute("width")
// const mapHeight = document.getElementById("indiaMap").getAttribute("height") // const mapHeight = document.getElementById("indiaMap").getAttribute("height")
const mapWidth = window.innerWidth - document.querySelector("#svgContainer").offsetWidth; const mapWidth = /*window.innerWidth - */document.querySelector("#svgContainer").offsetWidth * 0.85;
// const mapHeight = document.querySelector("#svgContainer").offsetHeight;
const mapHeight = window.innerHeight - document.querySelector("#svgContainer").getBoundingClientRect().top * 0.7;
const svg = d3.select("#svgContainer") const svg = d3.select("#svgContainer")
.append('svg') .append('svg')
.attr('width', '1300') .attr('width', mapWidth.toString())
.attr('height', '1300') .attr('height', (mapHeight).toString())
// .attr('viewbox', '0 0 860 500') // .attr('viewbox', '0 0 860 500')
// .attr('preserveAspectRatio', "xMidYMid meet") // .attr('preserveAspectRatio', "xMidYMid meet")
.attr('id', 'indiaMap') .attr('id', 'indiaMap')
.call(responsivefy); // .call(responsivefy);
function drawMap(world) { function drawMap(world) {
const projection = d3.geoMercator().fitWidth(mapWidth,world) const projection = d3.geoMercator().fitSize([mapWidth, mapHeight], world)
const path = d3.geoPath().projection(projection); const path = d3.geoPath().projection(projection);
const states = svg.selectAll("g") const states = svg.selectAll("g")