Performance issues on Raphael JS with more than 3000 elements

"[email protected] [svg-developers]" <[email protected]> 26 Jan 2016 02:39:38 -0800
Newsgroups gmane.text.xml.svg.devel
Message-ID <[email protected]>
--9nlWnTS9ocNmxdhsK3FKVLWiM6a5jwOaA8HvrLV
Content-Transfer-Encoding: base64
Content-Type: text/plain; charset="UTF-8"

SGVsbG8gZXZlcnlib2R5LA0KDQpJJ20gaGF2aW5nIHBlcmZvcm1hbmNlIGlzc3VlcyBjcmVhdGlu
ZyBhIHNlYXRpbmcgcGxhbiB1c2luZyBSYXBoYWVsIEpTIGFuZCByYXBoYWVsLnBhbi16b29tLmpz
LiANCg0KSSB0cmllZCByZW1vdmluZyB0aGUgZXZlbnQgaGFuZGxlcnMuIEkgcm91bmRlZCB0aGUg
Y29vcmRpbmF0ZXMgdG8gSU5UcywgSSB1c2VkIHRoZSByYXBoYWVsIEpTIGdyb3VwaW5nIHBsdWdp
bi4gTm90aGluZyBvZiBpdCBoZWxwZWQgaW1wcm92aW5nIHRoZSBwZXJmb3JtYW5jZSB3aGVuIG1v
dmluZyB0aGUgU1ZHIGVsZW1lbnRzIGFyb3VuZC4NCiANCg0KIHZhciBpbkRldGFpbHMgPSBmYWxz
ZTsNCnZhciBjb250YWluZXIgPSAkKCIjbWFwIik7DQp2YXIgciA9IFJhcGhhZWwoJ21hcCcsIGNv
bnRhaW5lci53aWR0aCgpLCBjb250YWluZXIuaGVpZ2h0KCkpOw0KdmFyIHBhblpvb20gPSByLnBh
bnpvb20oeyBpbml0aWFsWm9vbTogMCwgaW5pdGlhbFBvc2l0aW9uOiB7IHg6IDAsIHk6IDB9IH0p
Ow0KdmFyIGlzSGFuZGxpbmcgPSBmYWxzZTsNCnZhciBjaXJjbGVSYWRpdXMgPSA0Ow0KdmFyIGcg
PSBudWxsOyAvLyBPdXIgU1ZHIGdyb3VwDQoNCg0KICQuZWFjaChzaXR6ZSwgZnVuY3Rpb24gKGtl
eSwgZGF0YSkgew0KICAgICAgICAgICAgdmFyIG9iaiA9IHIuY2lyY2xlKHBhcnNlSW50KGRhdGEu
eFdlcnQpLHBhcnNlSW50KGRhdGEueVdlcnQpLGNpcmNsZVJhZGl1cykNCiAgICAgICAgICAgICAg
ICAgICAgLmF0dHIoe2ZpbGw6IiNDOUMiLCBzdHJva2U6IiNDM0MifSkNCn0pOw0KDQogDQoNCiAN
Cg0KIEFtIEkgbWlzc2luZyBzb21ldGhpbmc/IFdoYXQgbWF5IEkgZG8gdG8gaW1wcm92ZSB0aGUg
cGVyZm9ybWFuY2UuDQogDQoNCiBQbGVhc2UgaGVscCBpbW1lZGlhdGVseS4gDQoNCiANCg0KIFRo
YW5rcyBpbiBhZHZhbmNlDQogDQoNCiBSZWdhcmRzDQogQWxleA0KDQo=


--9nlWnTS9ocNmxdhsK3FKVLWiM6a5jwOaA8HvrLV
Content-Type: text/html; charset=UTF-8
Content-Transfer-Encoding: 7bit





<head>

<style type="text/css">
<!--

/* start of attachment style */
       .ygrp-photo-title{
         clear: both;
         font-size: smaller;
         height: 15px;
         overflow: hidden;
         text-align: center;
         width: 75px;
       }
       div.ygrp-photo{
         background-position: center;
         background-repeat: no-repeat;
         background-color: white;
         border: 1px solid black;
         height: 62px;
         width: 62px;
       }

       div.photo-title 
         a,
         div.photo-title a:active,
         div.photo-title a:hover,
         div.photo-title a:visited {
           text-decoration: none; 
       }

       div.attach-table div.attach-row {
         clear: both;
       }

       div.attach-table div.attach-row div {
         float: left;
         /* margin: 2px;*/
       }

       p {
         clear: both;
         padding: 15px 0 3px 0;
	 overflow: hidden;
       }

       div.ygrp-file {
         width: 30px;
         valign: middle;
       }
       div.attach-table div.attach-row div div a {
         text-decoration: none;
       }

       div.attach-table div.attach-row div div span {
         font-weight: normal;
       }

       div.ygrp-file-title {
         font-weight: bold;
       }
 /* end of attachment style */
        -->
        </style>
        </head>
<html>
<head>
<style type="text/css">
<!--
#ygrp-mkp {
  border: 1px solid #d8d8d8;
  font-family: Arial;
  margin: 10px 0;
  padding: 0 10px;
}

#ygrp-mkp hr {
  border: 1px solid #d8d8d8;
}

#ygrp-mkp #hd {
  color: #628c2a;
  font-size: 85%;
  font-weight: 700;
  line-height: 122%;
  margin: 10px 0;
}

#ygrp-mkp #ads {
  margin-bottom: 10px;
}

#ygrp-mkp .ad {
  padding: 0 0;
}

#ygrp-mkp .ad p {
  margin: 0;
}

#ygrp-mkp .ad a {
  color: #0000ff;
  text-decoration: none;
}
-->
</style>
</head>
<body>



<!-- |**|begin egp html banner|**| -->

<br><br>

<!-- |**|end egp html banner|**| -->


Hello everybody,<br><br>I&#39;m having performance issues creating a seating plan using Raphael JS and raphael.pan-zoom.js. <br><br>I tried removing the event handlers. I rounded the coordinates to INTs, I used the raphael JS grouping plugin. Nothing of it helped improving the performance when moving the SVG elements around.<br><p><br><span></span></p><p>var inDetails = false;<br>var container = $(&quot;#map&quot;);<br>var r = Raphael(&#39;map&#39;, container.width(), container.height());<br>var panZoom = r.panzoom({ initialZoom: 0, initialPosition: { x: 0, y: 0} });<br>var isHandling = false;<br>var circleRadius = 4;<br>var g = null; // Our SVG group<br><br><span></span></p><p><span>$.each(sitze, function (key, data) {<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var obj = 
 r.circle(parseInt(data.xWert),parseInt(data.yWert),circleRadius)<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; .attr({fill:&quot;#C9C&quot;, stroke:&quot;#C3C&quot;})<br>});<br class="yui-cursor"></span></p><p><br><span></span></p><p><br><span></span></p><p><span>Am I missing something? What may I do to improve the performance.</span></p><p><br><span></span></p><p><span>Please help immediately. <br></span></p><p><br><span></span></p><p><span>Thanks in advance</span></p><p><span><br></span></p><p><span>Regards</span></p><p><span>Alex<br class="yui-cursor"></span></p>



<!-- |**|begin egp html banner|**| -->

<br>


<br>

<!-- |**|end egp html banner|**| -->


<div width="1" style="color: white; clear: both;"/>__._,_.___</div>

      
  

    
    <div id="fromDMARC" style="clear:both; margin-top: 10px;">
         <hr style="height:2px ; border-width:0; color:#E3E3E3; background-color:#E3E3E3;">
         Posted by: [email protected]         <hr style="height:2px ; border-width:0; color:#E3E3E3; background-color:#E3E3E3;">
    </div>
<!-- Start Recommendations -->
<!-- End Recommendations -->


<!-- |**|begin egp html banner|**| -->

<br><br>
<tt>
-----<BR>
To unsubscribe send a message to: [email protected]<BR>
-or-<BR>
visit <a href="http://groups.yahoo.com/group/svg-developers">http://groups.yahoo.com/group/svg-developers</a> and click &quot;edit my membership&quot;<BR>
----</tt>
<br><br>

<!-- |**|end egp html banner|**| -->



<!-- |**|begin egp html banner|**| -->

  <img src="http://geo.yahoo.com/serv?s=97476590/grpId=1298421/grpspId=1706030390/msgId=66520/stime=1453860631" width="1" height="1"> <br>

<!-- |**|end egp html banner|**| -->

  
<!-- |**|begin egp html banner|**| -->

<br>



   
     
 
        <!-- |**|begin egp html banner|**| -->
        <div id="ygrp-vital" style="background-color: #f2f2f2; font-family: Verdana; font-size: 10px; margin-bottom: 10px; padding: 10px;">

        <span id="vithd" style="font-weight: bold; color: #333; text-transform: uppercase; "><a href="https://groups.yahoo.com/neo/groups/svg-developers/info;_ylc=X3oDMTJlOGwxN2NoBF9TAzk3MzU5NzE0BGdycElkAzEyOTg0MjEEZ3Jwc3BJZAMxNzA2MDMwMzkwBHNlYwN2dGwEc2xrA3ZnaHAEc3RpbWUDMTQ1Mzg2MDYzMQ--" style="text-decoration: none;">Visit Your Group</a></span>

     <ul style="list-style-type: none; margin: 0; padding: 0; display: inline;">
            <li style="border-right: 1px solid #000; font-weight: 700; display: inline; padding: 0 5px; margin-left: 0;">
      <span class="cat"><a href="https://groups.yahoo.com/neo/groups/svg-developers/members/all;_ylc=X3oDMTJmOTM3bWZqBF9TAzk3MzU5NzE0BGdycElkAzEyOTg0MjEEZ3Jwc3BJZAMxNzA2MDMwMzkwBHNlYwN2dGwEc2xrA3ZtYnJzBHN0aW1lAzE0NTM4NjA2MzE-" style="text-decoration: none;">New Members</a></span>
      <span class="ct" style="color: #ff7900;">2</span>
    </li>
                                              </ul>
  </div>


<div id="ft" style="font-family: Arial; font-size: 11px; margin-top: 5px; padding: 0 2px 0 0; clear: both;">
  <a href="https://groups.yahoo.com/neo;_ylc=X3oDMTJkcHI4amk3BF9TAzk3NDc2NTkwBGdycElkAzEyOTg0MjEEZ3Jwc3BJZAMxNzA2MDMwMzkwBHNlYwNmdHIEc2xrA2dmcARzdGltZQMxNDUzODYwNjMx" style="float: left;"><img src="http://l.yimg.com/ru/static/images/yg/img/email/new_logo/logo-groups-137x15.png" height="15" width="137" alt="Yahoo! Groups" style="border: 0;"/></a>
  <div style="color: #747575; float: right;"> &bull; <a href="https://info.yahoo.com/privacy/us/yahoo/groups/details.html" style="text-decoration: none;">Privacy</a> &bull; <a href="mailto:[email protected]?subject=Unsubscribe" style="text-decoration: none;">Unsubscribe</a> &bull; <a href="https://info.yahoo.com/legal/us/yahoo/utos/terms/" style="text-decoration: none;">Terms of Use</a> </div>
</div>

<!-- |**|end egp html banner|**| -->

  </div> <!-- ygrp-msg -->

   


  <br>

<!-- |**|end egp html banner|**| -->


<div style="color: white; clear: both;"/>__,_._,___</div>
</body>

</html>

--9nlWnTS9ocNmxdhsK3FKVLWiM6a5jwOaA8HvrLV--