У меня есть что-то похожее на Mike Bostock * Zoom to Bounding в моем коде, однако я хотел добавить возможность также перетаскивать / масштабировать колесико мыши. Работать с этим было хорошо, однако я бы оказался в ситуации, когда svg transform / translate to zoom не будет хорошо работать с zoomwheel zoom, потому что zoomhwheel zoom не будет знать масштаб масштабирования, как это сделано в примере с Майксом.
Итак, чтобы исправить это, я пытаюсь заставить функцию щелчка использовать событие масштабирования. Это отлично работает на некоторых частях карты, но не на других, и я не знаю почему. Пример, показывающий то, о чем я говорю:
https://jsfiddle.net/72g1wL0t/8/
Западная сторона карты, кажется, работает нормально при нажатии на нее. Однако, если вы переместитесь на восточное побережье, все пойдет в ад.
Даже странно, если я изменю линию, которая рисует графы в jsfiddle, на us.objects.states и просто нарисую состояния,тогда масштабирование отлично работает для всей карты.
Кто-нибудь дает мне какие-либо указания здесь? Я знаю, что некоторые из функций масштабирования в d3v4, вероятно, были бы лучшим способом сделать это, но я застрял на d3v3.
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;
var scale = .9 / Math.max(dx / width, dy / height);
var translate = [width / 2 - scale * x, height / 2 - scale * y];
svg.transition()
.duration(750)
.call(zoom.translate(translate)
.scale(scale).event);