Maintaining dimensions on zoom

28 views
Skip to first unread message

iqba...@gmail.com

unread,
Nov 11, 2020, 6:21:41 PM11/11/20
to d3-js
Hello all,

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">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<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>


    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="http://vizjs.org/viz.v1.1.0.min.js"></script>
    <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>
Reply all
Reply to author
Forward
0 new messages