Merkezi bir geoJSON bir nesne verilen d3 göster

SORU

24 Ocak 2013, PERŞEMBE

Merkezi bir geoJSON bir nesne verilen d3 göster

Şu anda d3 varsa geoJSON nesne gidiyorsun çekmek için ölçek ve tercüme almak için bu boyutu istedi ve tercüme için merkezi. Bu deneme yanılma çok sıkıcı bir iştir, ve eğer biri bu değerleri elde etmek için daha iyi bir yol biliyor mu diye merak ettim?

Örneğin eğer bu kod var

var path, vis, xy;
xy = d3.geo.mercator().scale(8500).translate([0, -1200]);

path = d3.geo.path().projection(xy);

vis = d3.select("#vis").append("svg:svg").attr("width", 960).attr("height", 600);

d3.json("../../data/ireland2.geojson", function(json) {
  return vis.append("svg:g")
    .attr("class", "tracts")
    .selectAll("path")
    .data(json.features).enter()
    .append("svg:path")
    .attr("d", path)
    .attr("fill", "#85C3C0")
    .attr("stroke", "#222");
});

Nasıl edinebilirim .ölçek(8500) ve .([0, -1200]) tercüme azar azar gitmeden?

CEVAP

4 ŞUBAT 2013, PAZARTESİ

Benim cevabım Jan van der Laan bulunur, ama coğrafi ağırlık merkezi Hesaplaması gerek yok çünkü işleri biraz kolaylaştırmak; sadece sınırlayıcı kutunun gerekiyor. Ve, ölçeklendirilmemiş, untranslated birim bir projeksiyon kullanarak, matematik basitleştirebilirsiniz.

Kod önemli bölümü şudur:

// Create a unit projection.
var projection = d3.geo.albers()
    .scale(1)
    .translate([0, 0]);

// Create a path generator.
var path = d3.geo.path()
    .projection(projection);

// Compute the bounds of a feature of interest, then derive scale & translate.
var b = path.bounds(state),
    s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
    t = [(width - s * (b[1][0]   b[0][0])) / 2, (height - s * (b[1][1]   b[0][1])) / 2];

// Update the projection to use computed scale & translate.
projection
    .scale(s)
    .translate(t);

Birim projeksiyon özelliği bounding box comping sonra, uygun hesaplayabilirsinizölçektuvalin en boy oranını (width height) için sınırlayıcı kutunun (b[1][0] - b[0][0] b[1][1] - b[0][1]) en boy oranını karşılaştırarak. Bu durumda, ben de ölçekli sınırlayıcı kutu için � tuval yerine 100%, o yüzden biraz ekstra oda kenarları için darbeleri ve çevre özellikleri veya dolgu.

O zaman hesaplayabilirsiniztercümesınırlayıcı kutusunun merkezine ((b[1][0] b[0][0]) / 2 (b[1][1] b[0][1]) / 2) kullanarak tuvalin Merkezi (width / 2 height / 2). Sınırlama kutusunu koordinatları ünite izdüşümü olduğundan, ölçek (s) çarpımı olmalıdır.

, 14**: örneğin

Projeksiyon ayarlama olmadan bir koleksiyon belirli bir özelliği zoom nasıl olduğu ile ilgili bir soru varyanive uzaklaştırmak için bir geometrik dönüşümü ile projeksiyon birleştirerek. Bu yukarıdaki gibi aynı ilkeleri kullanır, ama matematik geometrik (SVG "" özniteliği) coğrafi projeksiyon ile birlikte. dönüşümü yüzünden biraz farklıdır

, 16**: örneğin