: बनाम स्थिति x और y

Question

का अनुवाद करते हैं मैं इस तरह के rect या line के रूप में सरल वस्तुओं स्थिति मैं transform विशेषता या x और y विशेषताओं का उपयोग करना चाहिए करना चाहते हैं?

// this 
d3.selectAll('rect') 
    .attr('x', Number) 
    .attr('y', 0) 

// or this? 
d3.selectAll('rect') 
    .attr("transform", function(d) { return 'translate(' + d + ', 0)' }); 

प्रदर्शन अंतर क्या है?

Answer 1

एसवीजी transform में हार्डवेयर त्वरित नहीं है। उनके पास एकल तत्वों (मेरे अनुभव में) के लिए समान प्रदर्शन है। हालांकि, मैं transform अधिक यदि आप उपयोग नहीं कर रहे का उपयोग चारों ओर स्थानांतरित करने के लिए बात है क्योंकि एसवीजी में नहीं सभी तत्वों को एक x या y गुण, पर विचार ...

<line x1="0" y1="0" x2="100" y2="100" /> 
<circle cx="100" cy="100" r="100" /> 
<path d="M 0 0 L 100 100" /> 
<rect x="0" y="0" width="100" height="100" /> 

आप इन तत्वों में से प्रत्येक के लिए एक अलग कार्यान्वयन लिखना चाहिए । एक ऐसा क्षेत्र है जहां transform वास्तव में तेजी से होता है, तत्वों की एक बड़ी संख्या बढ़ रहा है अगर आपके पास ...

<g transform="translate(100, 100)"> 
    <line x1="0" y1="0" x2="100" y2="100" /> 
    <circle cx="100" cy="100" r="100" /> 
    <path d="M 0 0 L 100 100" /> 
    <rect x="0" y="0" width="100" height="100" /> 
</g> 

यह प्रत्येक तत्व चलती से गहन कम प्रसंस्करण हो जाएगा व्यक्तिगत रूप से