d3.js: अनुवाद करते समय अपने केंद्र के चारों ओर एक एसवीजी घुमाने के लिए कैसे?

Question

समस्या:

मैं किसी भी लाभ का उपयोग करने के लिए, एक साथ घूमने और d3.js v4.2.2 के साथ एक एसवीजी का अनुवाद करने के लिए सामान्य समाधान खोजने का प्रयास नहीं कर रहा हूं।

मैं एसवीजी को सही स्थिति में शुरू और समाप्त कर सकता हूं, लेकिन बीच में आसानता सभी गलत है। नीचे एक जेएसएफडल है जहां मैंने डीओएम से खींचे गए एक ही एसवीजी के कई उदाहरणों पर एक घुमाव + अनुवाद किया है, प्रत्येक डेटापॉइंट के अनुसार एक अलग राशि रोटेशन के लिए।

ध्यान देने योग्य एक महत्वपूर्ण बात यह है कि मुझे (100,100) से (500,500) से अनुवाद करते समय काम करने के लिए इस समाधान की आवश्यकता होती है, साथ ही साथ जब मैं (0,0) से शुरू होता हूं।

https://jsfiddle.net/3jbv23em/

var serializer = new XMLSerializer(); 

var svgNode = serializer.serializeToString(document.querySelector('#svgs svg defs svg')); 

var dataset = [1,8,15,22,29,36,43,50,57,64,71,78,85,92,99,106,113,120,127,134,141,148,155,162,169,176,183,190,197,204,211,218,225,232,239,246,253,260,267,274,281,288,295,302,309,316,323,330,337,344,351,358] 

var wrapper = d3 
    .select('#game svg') 
     .attr('width', window.innerWidth) 
     .attr('height', window.innerHeight) 
    .selectAll('g') 
     .data(dataset) 
     .enter() 
     .append('g') 
      .html(function(d) { return svgNode; }) 
      .transition() 
      .duration(1500) 
      .attr('transform', function(d) { 
       return 'translate(500,300)' + 
         'rotate(' + d * 1.8 + ', 63, 54.77)'; 
      }); 

(दुर्भाग्य से, मैं नहीं डी 3 JSFiddle में काम कर v4 प्राप्त करने के लिए, तो JSFiddle यहाँ v3 का उपयोग कर रहा है कर रहा था। हालांकि, समस्या एक ही है)।

मेरा अपेक्षित व्यवहार: सभी मुर्गियां एक ही केंद्र के चारों ओर घूमती हैं, कभी भी एनीमेशन के अंत में दिखाई देने वाले सर्कल के आयामों को विस्तारित नहीं करतीं।

वास्तविक परिणाम: सभी मुर्गियां अंत में सही स्थिति पर लौटने से पहले शीर्ष बाएं कोने की अनुवादित मूल स्थिति के चारों ओर घूमती हैं।

समाधान यही कारण है कि मेरे लिए काम नहीं किया था:

How to rotate an object around the center in d3.js

• यह एक नियत बिन्दु के चारों और घूमती आगे दूर, वस्तु एक पर एक बिंदु के आसपास नहीं के बारे में है

को घुमाने के लिए कोशिश कर रहा है

SVG rotation anchorpoint

• यह काम हो सकता है, लेकिन पूरी तरह से मुझे डी 3 पारिस्थितिकी तंत्र

How do I rotate or scale (transform) an SVG path relative to its center point?

• मैं समाधान की जरूरत है एक मनमाना बिंदु से शुरू करने के लिए से बाहर ले जाता है, हमेशा नहीं मूल @ (0,0)

निष्कर्ष में:

मैं इस समय बहुत परेशान हूं, और किसी भी मदद की बहुत सराहना की जाती है। आपके समय के लिए धन्यवाद।

Answer 1

क्योंकि डी 3 संक्रमण दोनों अनुवाद और घुमाने के लिए लागू होते हैं, आपको कुछ अजीब दिखने वाले एनिमेशन मिलते हैं, भले ही अंतिम परिणाम आप जो खोज रहे हैं।

डी 3 एक d3.interpolateString प्रदान करता है जो एनीमेशन को जिस तरह से आप चाहें निष्पादित करता है। d3.interpolateString को एक प्रारंभिक और समापन परिवर्तन की आवश्यकता है। d3.interpolateString का उपयोग attrTween के भीतर किया जाता है।

बदलें

.attr('transform', function(d) { 
    return 'translate(500,300)' + 
      'rotate(' + d * 1.8 + ', 63, 54.77)'; 
}); 

साथ

.attrTween('transform', function(d, i, a) { 
    return d3.interpolateString('translate(0,0) rotate(0)', 
           'translate(500,300)' + 
           'rotate(' + d * 1.8 + ', 63, 54.77)'); 
}); 

यहाँ छोटी स्क्रीन के लिए बेहतर दर्शनीयता के लिए अनुवाद करने के लिए एक ट्वीक इस पुस्तक का नूतन jsfiddle है।

https://jsfiddle.net/3jbv23em/16/

एक ही मुद्दे के साथ एक सहायक लिंक "D3.js animate rotation" है।