Ho iniziato a utilizzare la libreria dc.js per creare tutti i tipi di grafici e mi sono imbattuto in un problema quando stavo cercando di creare una mappa di Geo Choropleth usando dc.js e non potevo aggiungere la possibilità di zoomare e spostare la mappa.
Tutti gli esempi che ho visto utilizzavano d3 e svg .. ma una volta utilizzati questi esempi, non sono riuscito a utilizzare i dati di dc.dimention e tutti i calcoli del crossfilter.Come aggiungere l'effetto zoom a dc.geoChoroplethChart?
per esempio il mio codice è:
d3.json("world-countries.json", function (statesJson) {
geoChart.width(1000)
.height(600)
.dimension(countryDim)
.projection(d3.geo.mercator()
.scale((960 + 1)/4)
.translate([960/4, 960/4])
.precision(.1))
.group(countryGroup)
.colors(d3.scale.quantize().range(["#E2F2FF","#C4E4FF","#9ED2FF","#81C5FF","#6BBAFF","#51AEFF","#36A2FF","#1E96FF","#0089FF","#0061B5"]))
.colorDomain([0, 200])
.colorCalculator(function(d){ returnd ?geoChart.colors()(d) :'#ccc'; })
.overlayGeoJson(statesJson.features,"state",function(d){
return d.properties.name;
})
.title(function (d) {
return "State: " + d.key + (d.value ? d.value : 0) + "Impressions";
});
che funziona bene, ma voglio aggiungere l'effetto zoom e di essere in grado di spostare la mappa. Come lo posso fare?!?!
grazie in anticipo!
Così come posso ripristinare la mappa ingrandita? Ad esempio, ripristina tutte le funzioni attualmente ripristina lo stato selezionato, ma non torna alla dimensione originale. –
come possiamo impostare la scala della mappa quando iniziamo a ingrandirla- la mia mappa è grande, e voglio metterla in una sorta di "bounding box" e mostrarla, non tutto in una volta ma basandosi su un centroide predeterminato e quindi consentire all'utente di navigare come vogliono. come ottenere questo? –
questo non funziona per me! 'd3.event.translate' genera errore' indefinito'. – Ciwan