переполнение географической карты d3

Я пытаюсь отобразить свою карту в div - но я хочу, чтобы эта карта была ограничена размером div - прямо сейчас она игнорирует значения 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