When the mouse drags across the empty space, the force graph continually jumps

Question

When the mouse drags across the empty space, the force graph continually jumps

I have some questions.

I utilized a force graph and added zoom functionality to it.

However, when I drag the mouse over the blank area, the force graph keeps jumping erratically.

like this

Is there a way to prevent the graph from jumping? Thank you.

(I apologize for any errors in my English. Thank you again.)

This is the code I used for zooming:

var zoom = d3.behavior.zoom()
    .scaleExtent([1, 10])
    .on("zoom", zoomed);

function zoomed() {
  svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

javascript d3.js

Answer 1

Answer №1

I made an enhancement to your base SVG by adding a g element to group all the elements together (appending any other elements to the g element instead of the svg). In the zoomed() function, I applied transforms to the g element rather than the svg element:

var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.call(zoom);

var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.right + ")");

Here is the zoom method:

function zoomed() {
  g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

In addition, when setting up node listeners, I prevented event propagation for the 'mousedown' event by adding this to the code:

var node = g.selectAll(".node")
.data(force.nodes())
.enter().append("g")
.attr("class", "node")
.on("mouseover", mouseover)
.on("mouseout", mouseout)
.on("click", click)
.on("dblclick", dblclick)
.on("mousedown", function(d) { 
  d3.event.stopPropagation();
})
.call(force.drag)
.on('click', connectedNodes);

You can view the working example here.

Answer 2

I made an enhancement to your base SVG by adding a g element to group all the elements together (appending any other elements to the g element instead of the svg). In the zoomed() function, I applied transforms to the g element rather than the svg element:

var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.call(zoom);

var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.right + ")");

Here is the zoom method:

function zoomed() {
  g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

In addition, when setting up node listeners, I prevented event propagation for the 'mousedown' event by adding this to the code:

var node = g.selectAll(".node")
.data(force.nodes())
.enter().append("g")
.attr("class", "node")
.on("mouseover", mouseover)
.on("mouseout", mouseout)
.on("click", click)
.on("dblclick", dblclick)
.on("mousedown", function(d) { 
  d3.event.stopPropagation();
})
.call(force.drag)
.on('click', connectedNodes);

You can view the working example here.

When the mouse drags across the empty space, the force graph continually jumps

Answer №1

Similar questions

What's the best way to loop through each touch event property within the TouchList of a touch event using JavaScript?

Unable to set the height for ul/div elements

Utilizing scroll functionality within a DIV container

Vuetify alters the text color of the <vs-button> element

$filter is functioning correctly, however it is generating an error message stating: "Error: 10 $digest() iterations reached. Aborting!"

Enhance a DOM element using personalized functions in jQuery

Having trouble getting smooth scrolling with easing to function properly

Initiate a function once the innerHTML content in Angular has been completely loaded

Where do JQuery and framesets vanish to?

another option besides the nextElementSibling

Importing a JSON file into a React component

Guide for building a Template-driven formArray in Angular

Display one div and conceal all others

What is the best way to reset a dropdown list value in angular?

How can you fix the "bad value" response in mongodb when utilizing query parameters in the url?

Encountered an npm installation error: The rollbackFailedOptional issue arose during the npm session with the verb npm-session a0d68 while attempting the command npm install --save

Discover the sub strings that fall between two specified regular expressions

Reactjs - Creating a video component with a placeholder that loads the video seamlessly

Unable to display images in the ngImgCrop upload preview modal screen

When a key is pressed, apply a background color and fade out effect using JavaScript