D3 haritanızı bir yere yakınlaştırmak için nasıl alabilirim?

Question

D3 ile çalışıyorum ve şu ana kadar sadece belirli bir durumu çizmek için chloropleth örneğini ayarlayabiliyorum. Bu, diğer tüm çokgen verilerini çıkarmayı gerektiriyordu, böylece ihtiyacım olan durumdan uzak kaldım.

Bununla başlatan:

ve sonra bu şeyler tweaked: Ancak

, ne yapmak isterdim oto tavaya etmektir/oluşturulduktan sonra haritayı Büyütmek böylece durum şu şekilde ön ve ortadadır:

Bunu D3 kitaplığı üzerinden yapıyorum? ya da bazı bağımsız kodlar (Ben şu anda bunu yapmak için manuel kaydırma/yakınlaştırma sağlamak için d3 ile çalışan jquery-svgpan var)?

Answer 1

Bunu bulduğuma yaklaşmanın en kolay yolu, yakınlaştırdığınız durumun sınırlayıcı kutusuna bağlı olarak durumları (örnekte #states) çevreleyen g öğesinde bir dönüşüm ayarlamaktır:

// your starting size 
var baseWidth = 600; 

d3.selectAll('#states path') 
    .on('click', function(d) { 
     // getBBox() is a native SVG element method 
     var bbox = this.getBBox(), 
      centroid = [bbox.x + bbox.width/2, bbox.y + bbox.height/2], 
      zoomScaleFactor = baseWidth/bbox.width, 
      zoomX = -centroid[0], 
      zoomY = -centroid[1]; 

     // set a transform on the parent group element 
     d3.select('#states') 
      .attr("transform", "scale(" + scaleFactor + ")" + 
       "translate(" + zoomX + "," + zoomY + ")"); 
    }); 

çok daha fazla bunu temizlemek için buraya yapabileceği bir şey yok oluyor - Eğer genişliği veya yüksekliği üzerinde yakınlaştırma dayandırmak zoom'dan inme genişliğini değiştirmek gerekip gerekmediğini kontrol nihai zoom bazı tolerans verecek, animasyon geçiş, vb - ama bu temel bir kavramdır.