D3js v5 Масштабирование до ограничительной рамки в geoMercator (). FitSize () - PullRequest
Новая
       10

D3js v5 Масштабирование до ограничительной рамки в geoMercator (). FitSize ()

0 голосов
/ 25 октября 2018

Я использую это как справку: https://bl.ocks.org/iamkevinv/0a24e9126cd2fa6b283c6f2d774b69a2

Скорректирован некоторый синтаксис, чтобы соответствовать версии 5

Масштаб работает, Translate выглядит так же, как и он, потому что если я изменяю значение, он увеличиваетв другом месте ..

Но проблема в том, что он не увеличивает правильное место, которое я нажал.

Я думаю, что это не доходит до места правильно, потому что я использую d3.geoMercator().fitSize([width, height], geoJSONFeatures)вместо этого: 

var bounds = path.bounds(d),
  dx = bounds[1][0] - bounds[0][0],
  dy = bounds[1][1] - bounds[0][1],
  x = (bounds[0][0] + bounds[1][0]) / 2,
  y = (bounds[0][1] + bounds[1][1]) / 2,
  scale = Math.max(1, Math.min(8, 0.9 / Math.max(dx / width, dy / height))),
  translate = [width / 2 - scale * x, height / 2 - scale * y];

Уже пытался изменить значения, чтобы они соответствовали моим, но не получилось, я не могу его получить.

Вот мой прогноз: 

var width = 500;
var height = 600;

d3.json("/regions50mtopo.json")
  .then((geoJSON) => {

      var geoJSONFeatures = topojson.feature(geoJSON, geoJSON.objects["Regions.50m"]);

      // My Projection
      var projection = d3.geoMercator().fitSize([width, height], geoJSONFeatures);

 ...

Любая помощь, руководство или ссылка?

Примечание: я картирую другую страну, и fitSize (...) решает проблему, чтобы легко поместиться в моем svg, поэтому я не могу использовать то же самое, что ив ссылочной ссылке я предоставил.

1 Ответ

0 голосов
/ 27 октября 2018

Нашел ответ: https://bl.ocks.org/veltman/77679636739ea2fc6f0be1b4473cf03a

centered = centered !== d && d;

var paths = svg.selectAll("path")
  .classed("active", d => d === centered);

// Starting translate/scale
var t0 = projection.translate(),
  s0 = projection.scale();

// Re-fit to destination
projection.fitSize([960, 500], centered || states);

// Create interpolators
var interpolateTranslate = d3.interpolate(t0, projection.translate()),
    interpolateScale = d3.interpolate(s0, projection.scale());

var interpolator = function(t) {
  projection.scale(interpolateScale(t))
    .translate(interpolateTranslate(t));
  paths.attr("d", path);
};

d3.transition()
  .duration(750)
  .tween("projection", function() {
    return interpolator;
});

Именно то, что я ищу.Теперь он работает, как и ожидалось.

Но, возможно, у кого-то также есть предложения о том, как его оптимизировать, потому что, как сказал и сам автор, он ощущается медленным и "медленным" при увеличении / уменьшении.

...