D3.behavior.zoom дрожит, дрожит, прыгает и отскакивает при перетаскивании

Я использую d3.behavior.zoom для реализации панорамирования и масштабирования на макете дерева, но он демонстрирует поведение, которое я бы назвал как отказоустойчивую или числовую нестабильность. Когда вы начнете таскать, дисплей будет необъяснимо прыгать, пока он не исчезнет. Код выглядит следующим образом:

var svg = target.append ("g");
...
svg.call (d3.behavior.zoom()
    .translate ([0, 0])
    .scale (1.0)
    .scaleExtent([0.5, 2.0])
    .on("zoom", function() {
        svg.attr("transform","translate(" + d3.event.translate[0] + "," +  d3.event.translate[1] + ") scale(" +  d3.event.scale + ")");
    })
);

Есть ли лучший способ установить преобразование, которое не вызывает такого рода помехи?

Ответы

Ответ 1

После более пристального изучения неустойчивость исходит из преобразования элемента svg, применяемого к местоположению мыши во время движения. Решением, в котором я закончил, является вставка другого элемента "g" между тем, который имеет поведение масштабирования и содержимое элемента специально для получения преобразования масштабирования/панорамирования:

var svg = target.append ("g");
var child = svg.append ("g");
...
svg.call (d3.behavior.zoom()
    .translate ([0, 0])
    .scale (1.0)
    .scaleExtent([0.5, 2.0])
    .on("zoom", function() {
        child.attr("transform","translate(" + d3.event.translate[0] + "," +  d3.event.translate[1] + ") scale(" +  d3.event.scale + ")");
    })
);
...
child.append("line")...