javascript - 鼠标拖动时的水平自动滚动在 Firefox 的 D3 树中不起作用

Question

我正在创建 D3 树。随着树节点的拖动，自动滚动在 Firefox 中不起作用。带有拖动树节点的自动滚动在 Firefox 中工作。它在 Chrome 中运行良好。

HTML代码

<div class="row">
    <div class="tree-container" id="treeId"></div>
</div>

D3.js代码

var nodeEnter = node.enter().append("g").call(dragListener).attr(
     "class", "node").attr("transform", function(d) {
     return "translate(" + source.y0 + "," + source.x0 + ")";
     }).on("mouseenter", nodeMouseEnter).on("mouseleave", nodeMouseLeave)
     .on('click', click).attr('id', function(d) {
    return d.nodeId;
});

$('.tree-container').css('overflow', 'auto');

Bootstrap.css

svg:not(:root) {
    overflow: visible;
}

Answer 1

var svg_scroll = d3.select("svg").node(),
             $parent = $('.tree-container'),
             $parent_document_height=$(document),
             w = $parent.width(),
             h = $parent_document_height.height(),
             sL = $parent.scrollLeft(), 
             sT = $parent_document_height.scrollTop();

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

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

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