2015-11-18 29 views
6

dc.js kitaplığı örnek ana sayfasına bağlı olarak this example benzeri bir görselleştirme üzerinde çalışıyorum. Sayfada gitmek için iyi bir örnek başlangıç ​​kodu var, ancak bir harita üzerinde kabarcık grafiği çizme hakkında belirli bir sorum var.Harita üzerinde BubbleChart Yerleşimi ile DC Dashboard Oluşturma - Daha İyi Örnek?

Yukarıdaki örnekte, yazarın Kanada eyaleti şekillerini görüntüleme yolunu el ile atar. Kod, grafiğini, caChart adında bir değişkene atar. Bu, Kanada haritasındaki belirli koordinatlarda çizilen baloncukları içerecektir. Kod elle atar gibi Ancak, daha da aşağı kodda göründüğü her kabarcık yerine programlı konumlarını atama çekiliyor için (x, y) web sayfasında koordinatları (yorumlara bakınız):

caChart.width(600) 
      .height(450) 
      .dimension(cities) 
      .group(totalCrimeRateByCity) 
      .radiusValueAccessor(function(p) { 
       return p.value.avgTotalCrimeRate; 
      }) 
      .r(d3.scale.linear().domain([0, 200000])) 
      .colors(["#ff7373","#ff4040","#ff0000","#bf3030","#a60000"]) 
      .colorDomain([13, 30]) 
      .colorAccessor(function(p) { 
       return p.value.violentCrimeRatio; 
      }) 
      .title(function(d) { 
       return "City: " + d.key 
         + "\nTotal crime per 100k population: " + numberFormat(d.value.avgTotalCrimeRate) 
         + "\nViolent crime per 100k population: " + numberFormat(d.value.avgViolentCrimeRate) 
         + "\nViolent/Total crime ratio: " + numberFormat(d.value.violentCrimeRatio) + "%"; 
      }) 
      // These points appear to be assigned manually 
      .point("Toronto", 364, 400) 
      .point("Ottawa", 395.5, 383) 
      .point("Vancouver", 40.5, 316) 
      .point("Montreal", 417, 370) 
      .point("Edmonton", 120, 299) 
      .point("Saskatoon", 163, 322) 
      .point("Winnipeg", 229, 345) 
      .point("Calgary", 119, 329) 
      .point("Quebec", 431, 351) 
      .point("Halifax", 496, 367) 
      .point("St. John's", 553, 323) 
      .point("Yukon", 44, 176) 
      .point("Northwest Territories", 125, 195) 
      .point("Nunavut", 273, 188); 

Ben Amerika Birleşik Devletleri'nin benzer bir haritasının üzerine çizmek istediğim uzun koordinatlarda zaman damgalı veriler. veri kabaca şuna benzer:

device_id, timestamp, lat, lon 
1, 2014-7-21, 40.7127837, -74.00594130000002 
2, 2014-7-22, 40.8516701, -93.2599318 

bir crossfilter boyuta içinde bu koordinatları okuyun ve programlı manuel olarak atamak zorunda kalmadan benzer bir alttaki harita görüntüsü üzerinde bu koordinatları çizmek için bir yolu var mı? Burada herhangi bir yardım (çalışma örneklerine işaretçiler dahil) takdir edilecektir.

+0

Evet, kabarcık bindirme grafik özellikle az gelişmiş olduğu . Kullanmak istediğiniz bir harita resminiz var mı, eğer öyleyse, projeksiyonu anlayabilir misiniz? Değilse, bağlantılı bir broşür metni çalışır mı? – Gordon

+0

@Gordon: Bir Broşür çizelgesi çalışabilir. ABD'nin temel imajı bu D3 örneğinden (http://bost.ocks.org/mike/bubble-map/) ödünç alınmış ve Albers US projeksiyonunu kullanarak tahmin edildiğine inanıyorum. Düşündüğüm diğer seçenek, ABD grafiğini D3 ile oluşturmak ve bu grafiği bir çapraz filtreleme boyutu ve grubunu beslemekti. Ancak, bunun hakkında nasıl emin olacağına emin değilim. Okuduğunuz için teşekkürler. – kylerthecreator

+0

Dolayısıyla, bu haritayı doğrudan kullanıyorsanız, projeksiyonun d3.geo.albersUsa olduğunu belirtir (https://gist.github.com/mbostock/9943478#file-makefile-L22-L24) () .scale (1280) .translate ([width/2, height/2]) '- bir şey elde etmenin en hızlı yolu bunu puanlarınıza uygulamak olacaktır. Kabarcık bindirme çizelgesi projeksiyonları destekliyorsa iyi olur, ama sanırım harita dışı da kullanılabilir, belki de bu yüzden. – Gordon

cevap

0

Sen tamamen kabarcık bindirme atlayıp sadece burada özetlenen gibi programlı bir şekilde kabarcıklar çizebilirsiniz drawSomething yönteminde

mapChart 
.on("renderlet", drawSomething) 

kullanabilirsiniz: https://stackoverflow.com/a/35476690/2795423