Scroll automatically when dragging the mouse

Question

Scroll automatically when dragging the mouse

My D3 tree creation is causing an issue with the horizontal scroll bar in Firefox 37. When trying to drag select a tree node, the horizontal scroll bar does not work. However, in Chrome, the horizontal scroll works fine during drag selection.

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

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

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;
            });

jquery css d3.js

Answer 1

Answer №1

Check out the following HTML code:

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

Here is the accompanying CSS:

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

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

rect{
    fill: green;
}

And finally, the JS code:

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 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
    })
}

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 2

Check out the following HTML code:

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

Here is the accompanying CSS:

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

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

rect{
    fill: green;
}

And finally, the JS code:

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 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
    })
}

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

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

Scroll automatically when dragging the mouse

Answer №1

Similar questions

How to implement a Datapicker plugin in jQuery version 2.1.1?

Issue with file upload in jQuery form plugin leads to Uncaught TypeError

Enhance the worth of text box

Tips for creating a dynamic logo that zooms in when you hover over it

Utilizing Selenium automation to navigate a website that features a custom jQuery plugin-checkbox functionality

Rearranging the Foundation Grid by incorporating smaller panels ahead of larger panels

"Enhance your website's search functionality with the power

A guide on retrieving and resetting the value of a radio button within a table

The picture above just won't stay within the div

When dynamically loading content with ajax, dynamic content fails to function properly

Utilize AjAx and the post method to transmit data to a servlet

Div that scrolls independently without affecting the position of other elements

Incorporate my personalized CSS file into the Bootstrap 4 development tools

view multiple HTML documents simultaneously in a single browser tab

Is it possible to navigate between jQuery EditInPlace fields using the Tab key?

Progress Bar Aligned in the Middle

Guide to using Razor syntax in JQuery to effortlessly redirect to a different page

Creating a single object from the union of two arrays with JavaScript

Stylish CSS menu design

Is there a glitch in the Selenium Java CSS Selector functionality?