d3.js: Çevirirken merkezin etrafında bir SVG nasıl döndürülebilir?

Question

Sorun:

Bir SVG'yi d3.js v4.2.2 ile eşzamanlı olarak döndürmek ve çevirmek için genel bir çözüm bulmaya çalışıyorum.

SVG'yi doğru konumlarda başlatıp sonlandırabilirim, ancak aradaki gevşeme yanlıştır. Aşağıda, DOM'den alınmış aynı SVG'nin birçok örneğinde bir döndürme + çevirme yaptığım bir JSFiddle, her biri veri noktasına göre farklı bir miktar rotasyonudur.

Dikkat edilmesi gereken önemli bir nokta şudur: (100) 'den (500,500)' a (0) 'dan başladığım kadarıyla çeviri yaparken çalışmak için bu çözüme ihtiyacım var.

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)'; 
      }); 

(Ne yazık ki,. Ancak, sorun aynıdır burada v3 kullanıyor JSFiddle böylece, JSFiddle çalışan D3 v4 almak mümkün değildi).

Beklenmediğim davranış: Tüm tavuklar aynı merkez etrafında dönüyor, hiçbir zaman animasyonun sonunda görülen dairenin boyutlarını geçmiyor.

Gerçek sonuç: Tüm tavuklar, en sonunda doğru konuma dönmeden önce sol üst köşenin çevrilmiş orijinal konumu etrafında dönerler. Iş için beni vermedi

Çözümleri:

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

• Bu değil nesne tek bir nokta etrafında, daha uzakta sabit bir nokta etrafında dönen hakkındadır

döndürmek için çalışıyor

SVG rotation anchorpoint

• Bu çalışır, ancak tamamen

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

• ben keyfi bir noktadan başlamak çözüm gerek D3 ekosistemin dışında, her zaman değil kökenli @ beni alır olabilir (0,0)

Sonuç olarak:

Şu anda oldukça şaşkınım ve herhangi bir yardım büyük beğeni topluyor. Zaman ayırdığın için teşekkürler.

Answer 1

D3 geçişleri hem çevirmeyi hem de birlikte döndürdüğünden, sonuç ne aradığınız olsa da bazı garip görünen animasyonlar elde edersiniz.

D3, animasyonu istediğiniz gibi yürütmeyi sağlayan bir d3.interpolateString sağlar. d3.interpolateString bir başlangıç ​​ve bitiş dönüşümü gerektirir. d3.interpolateString, attrTween içinde kullanılır.

İşte

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

ile

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

değiştirin küçük ekranlar için daha iyi Görüntülenebilirliğe için çeviri bir çimdik ile güncelleştirilmiş jsfiddle olduğunu.

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

aynı konu ile yararlı bir bağlantı "D3.js animate rotation" dir.