Блог

Главная - Вопросы по программированию - Как добавить эффект масштабирования в dc.geoChoroplethChart?

Как добавить эффект масштабирования в dc.geoChoroplethChart?

#map #zooming #dc.js

#словарь #масштабирование #dc.js

Вопрос:

Я начал использовать dc.js Библиотека для создания всех видов графиков, и я столкнулся с проблемой, когда пытался создать географическую карту с помощью dc.js и не смог добавить возможность масштабирования и перемещения карты.
Все примеры, которые я видел, использовали d3 и svg .. но как только я использовал эти примеры, я не мог использовать данные dc.dimension и все вычисления перекрестного фильтра.

например, мой код:

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

Это работает хорошо, но я хочу добавить эффект масштабирования и иметь возможность перемещать карту. как я могу это сделать ? !?!

заранее спасибо!

Ответ №1:

Итак, ответ: 

 var width = 960,
    height = 400;

var projection = d3.geo.mercator()
    .scale(200)
    .translate([width/2, height]);

function zoomed() {
    projection
    .translate(d3.event.translate)
    .scale(d3.event.scale);
    geoChart.render();
}

var zoom = d3.behavior.zoom()
    .translate(projection.translate())
    .scale(projection.scale())
    .scaleExtent([height/2, 8 * height])
    .on("zoom", zoomed);

var svg = d3.select("#geo-chart")
    .attr("width", width)
    .attr("height", height)
    .call(zoom);

geoChart
    .projection(projection)
    .width(1000)
    .height(400)
    .transitionDuration(1000)
    .dimension(countryDim)
    .group(ctrGroup)
    .filterHandler(function(dimension, filter){     
        dimension.filter(function(d) {return geoChart.filter() != null ? d.indexOf
        (geoChart.filter()) >= 0 : true;}); // perform filtering
        return filter; // return the actual filter value
     })
    .colors(d3.scale.quantize().range(["#E2F2FF", "#C4E4FF", "#9ED2FF", "#81C5FF",     
     "#6BBAFF", "#51AEFF", "#36A2FF", "#1E96FF", "#0089FF", "#0061B5"]))
    .colorDomain([0, 200])
    .colorCalculator(function (d) { return d ? geoChart.colors()(d) : '#ccc'; })      
    .overlayGeoJson(statesJson.features, "state", function (d) { return d.id; })    
    .title(function (d) {
        return "State: "   d.key   " "   (d.value ? d.value : 0)   " Impressions";
    });

Комментарии:

1. Итак, как я могу сбросить увеличенную карту? Например, функция reset all в настоящее время сбрасывает выбранное состояние, но не возвращается к исходному размеру .

2. как мы можем установить масштаб карты, как только мы начнем ее масштабировать — моя карта большая, и я хочу поместить ее в своего рода «ограничительную рамку» и показать ее, не всю сразу, а на основе заданного центроида, а затем позволить пользователю перемещаться по ней по своему усмотрению. как этого добиться?

3. у меня это не работает! d3.event.translate выдает undefined ошибку.

4. У меня немного сработало.. Я мог только уменьшить масштаб, и это было довольно резко. Я пытался возиться с scaleExtent, но пока безуспешно.

5. Ах, мне просто нужно было еще немного поиграть с числами.