d3 препълване на географска карта

Опитвам се да покажа моята карта в div - но искам тази карта да бъде ограничена до div-size - в момента тя игнорира стойностите w и h и настройката vis css също.

Има ли смисъл да задавате височина и ширина на svg? когато увелича мащаба на проекцията, тя винаги ще бъде по-голяма от организацията. svg.

var w = 200;
var h = 300;

// this will attach a svg-element with the class "map" to "mydiv"
var map = d3.select("#mydiv").append("svg:svg")
    .attr("width", w)
    .attr("height", h)
    .attr("class", "map"); 

var projection = d3.geo.albers()
    .origin([10.5,51])
    .scale(2000)
    .translate([100, 150]);

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

d3.json('germany.json', function(json) {
    map.selectAll('path')
        .data(json.features)
        .enter().append('path').attr('d', path);
});

и моя css:

#vis {
    overflow: hidden;
    width: 350px;
    height: 220px;
}

html d3.js geo scaling
person Thomas Deutsch    schedule 19.08.2012    source източник
comment
#vis и #mydiv два различни DIV елемента ли са?   -  person mbostock    schedule 19.08.2012

Отговори (1)


arrow_upward
6
arrow_downward

Основно има два начина за мащабиране на D3 карти:

  • Мащабирайте проекцията.

  • Поставете картата в елемент g и задайте трансформация на този елемент. Това има досадния страничен ефект от мащабирането на ширината на чертата, така че може да се наложи да зададете мащабиран стил stroke-width на елемента g.

И в двата случая вие мащабирате картата без пряка връзка с контейнерния елемент. Не мисля, че има начин за автоматично мащабиране на контейнера - мисля, че трябва да получите ширината на контейнера чрез JS (тук използвам jQuery, но има и опции за чист JS), след което задайте коефициента на мащабиране съответно:

var containerWidth = $('#myDiv').width(),
    baseWidth = 1000,
    baseStrokeWidth = 1,
    scaleFactor = containerWidth/baseWidth;

// now use scaleFactor in a transform or projection scale, e.g.:
d3.select('g.mapContainer')
    .attr("transform", "scale(" + scaleFactor + ")")
    // and invert the scale to keep a constant stroke width:
    .style("stroke-width", baseStrokeWidth / scaleFactor + "px");

Ако размерът на вашия контейнер ще се промени, трябва допълнително да зададете манипулатор window.onresize за преизчисляване на мащаба и актуализиране на трансформацията. Това е една от причините да използвате трансформиран атрибут g вместо мащаб на проекция - за да се справите с преоразмеряването на прозореца, не е нужно да проектирате повторно цялата си карта, просто мащабирайте съществуващите пътища нагоре или надолу, много по-бърза операция.

person nrabinowitz    schedule 19.08.2012