прокрутка при перетаскивании элемента с d3.js

Question

Я использую поведение перетаскивания d3 на элементе svg, который, возможно, необходимо удалить за пределы видимой области. У меня есть настройка в двух div с переполнением, установленным в auto, чтобы включить прокрутку. У меня это работает только с некоторыми браузерами, но не со всеми.

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

для рабочего примера см скрипки: http://jsfiddle.net/glanotte/qd5Td/1/

Это работает, как ожидалось на:

хрома - макинтош/окно сафари - макинтош

Но не работает на

Firefox - mac/windows IE - окна

html:

<div id="outerFrame"> 
    <div id="innerFrame"> 
     <svg width="600" height="600"> 
     </svg> 
    </div> 
</div> 

CSS:

#outerFrame{ 
    width: 300px; 
    height: 300px; 
    border: 1px solid red; 
    overflow: auto; 
} 

#innerFrame{ 
    width: 600px; 
    height: 600px; 
    background-color: lightgrey; 
} 

JavaScript:

var drag = d3.behavior.drag() 
    .on("dragstart", dragstart) 
    .on("drag", dragmove) 
    .on("dragend", dragend); 

function dragstart() { 
    d3.select(this).style("border", "1px solid red"); 
} 

function dragmove(d) { 
    var coordinates = d3.mouse(d3.select("svg").node()); 
    d3.select(this).attr({ 
     x: coordinates[0] - 50, 
     y: coordinates[1] - 25 
    }) 

} 

function dragend() { 
    d3.select(this).style("border", null); 
} 

d3.select("svg") 
    .append("rect") 
    .attr({x: 100, y: 100, width: 100, height: 50}) 
    .call(drag); 

Answer 1

Вы, к сожалению, ударил по bug in Firefox в который был noticed before by mbostock and marked as WONT-FIX.

Согласно предложению в сообщении об ошибке, вы можете заставить его работать, но только вручную прокручивая контейнер: http://jsfiddle.net/62CYD/

Реализация довольно проста и может быть улучшена за счет:

1. Использование анимации
2. Принимая во внимание ширину полос прокрутки, like done in DOMUtilityService in ng-grid.
3. Taking current mouse position into account, чтобы избежать привязки перетаскиваемого предмета и более плавной прокрутки.
4. Использование setTimeout продолжать прокрутку, даже если тянущие остановки

function dragmove(d) { 
    var svg = d3.select("svg").node(), 
     $parent = $('#outerFrame'), 
     w = $parent.width(), h = $parent.height(), 
     sL = $parent.scrollLeft(), sT = $parent.scrollTop(); 

    var coordinates = d3.mouse(svg), 
     x = coordinates[0], 
     y = coordinates[1]; 

    if (x > w + sL) { 
     $parent.scrollLeft(x - w); 
    } else if (x < sL) { 
     $parent.scrollLeft(x); 
    } 

    if (y > h + sT) { 
     $parent.scrollTop(y - h); 
    } else if (y < sT) { 
     $parent.scrollTop(y); 
    } 

    d3.select(this).attr({ 
     x: x - 50, 
     y: y - 25 
    }) 
}