I am trying to write a code that maintains the visual distribution of svg elements irrespective of the zoom. I have come up with a solution but it refreshes the page every time the zoom level changes. I am attaching the code as below. If someone can help me with more efficient solution, I will be grateful. Thank you.
<!DOCTYPE html>
<meta charset="utf-8">
<meta name='viewport'
content='width=device-width, initial-scale=1.0, maximum-scale=2.0' />
<link rel="stylesheet" href="menuStyleProjects.css">
<link rel="icon" href="icon2.jpg" type="image/x-icon">
<style>
#mysvg{
font-size: 12.2px;
float: left;
display: block;
width:90%;
}
body{
font-family: "Open Sans";
font-style: normal;
font-variant: normal;
font-weight: 300;
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
#mysvg{
margin-top: 0px;
}
</style>
<body>
<svg id="mysvg"></svg>
<script>
var w1 = $(window).width(), h1 = $(window).height();
window.addEventListener("resize",function(){
if($(window).width() != w1){
location.reload();
}
});
// 1. tell him about you, 2. he needs to know
var overallData = [1,2,3,4,5];
var colorA = "#B3A2C7";//"#B7E051";
var colorB = "#92D050";//"#51E0C2";
var colorC = "#FF0066";//"#7A51E0";
var colorD = "#E7DB4D";//"#E0516F";
var colorF = "#00B0F0";//"757BAB"
var svg = d3.select("#mysvg")
.append("svg:g");
var g = svg.selectAll("g")
.data(overallData)
.enter().append("svg:g")
.attr("transform", "translate(30,50)")
.attr("fill", colorF)
.attr("stroke", colorD);
bbox = document.getElementById("mysvg");
g.append('circle')
.attr('cx', function(d,i){return i*w1*0.2;})
.attr('cy', function(d,i){return 0.25*200;})
.attr('r', 30)
.style('fill', 'green');
</script>
</body>