D3 zoom pan stutter

Question

Я испытываю «заикание» с поведением сопротивления D3.

Кажется, подобная проблема "Stuttering" drag when using d3.behavior.drag() and transform

Однако решение не похоже на работу для поведения масштабирования.

Вот пример вопроса: (попробуйте перетащить прямоугольник) http://jsfiddle.net/EMNGq/109/

blocks = [ 
    { x: 0, y: 0 } 
]; 

var translate_var = [0,0]; 

zoom_var = d3.behavior.zoom() 
    .on("zoom", function(d) { 
    d.x = d3.event.x; 
    d.y = d3.event.y; 
    draw(); 
    }); 

svg = d3.select("body") 
    .append("svg:svg") 
    .attr("width", 600) 
    .attr("height", 600); 

function draw() { 
    g = svg.selectAll("g") 
    .data(blocks); 

    gEnter = g.enter().append("g") 
    .call(zoom_var); 

    g.attr("transform", function(d) { return "translate("+translate_var[0]+","+translate_var[1]+")"; }); 

    gEnter.append("rect") 
    .attr("height", 100) 
    .attr("width", 100); 
} 

draw() 

Answer 1

Вы приближать или перетащить элемент, а затем перевести один и тот же элемент. Поскольку перевод относительный, это приводит к тому, что заикается.

Как указано в documentation for Zoom Behavior:

Такое поведение автоматически создает обработчики событий для обработки масштабирования и панорамирования жесты на элемент контейнера. Поддерживаются как мыши, так и события касания.

Contrast его к documentation for Drag Behavior:

Такое поведение автоматически создает обработчики событий для обработки жестов перетаскивания на элемент. Поддерживаются как события мыши, так и события касания.

Ваше решение обратное к аналогичному вопросу. Вызовите функцию масштабирования на контейнере.

svg = d3.select("body") 
    .append("svg:svg") 
    .attr("width", 600) 
    .attr("height", 600) 
    .call(zoom_var); 

Вот demo.

Вы также можете быть заинтересованы в фактическом увеличении. Для этого просто добавьте scale в ваше правило transform. Вот demo with zoom enabled.