Collapsible tree visualization in D3 experiences erratic behavior while zooming

After spending a considerable amount of time grappling with this issue, I find myself stuck. My objective is to construct a d3 collapsible tree, but every time I attempt to zoom in, the tree shifts to position 0,0. I've come across other queries like d3.behavior.zoom jitters, shakes, jumps, and bounces when dragging that seem to address a similar problem, but I'm struggling to implement those solutions in my particular case.

My suspicion is that this particular segment of code might be at the root of the issue, yet I'm uncertain how to modify it for the zooming function to work correctly.

d3.select('g').transition()
    .duration(duration)
    .attr("transform", "translate(" + x + "," + y + ")scale(" + scale + ")")
zoomListener.scale(scale);

For reference, here is the code I am currently working with: https://jsfiddle.net/ramo2600/y79r5dyk/11/

javascriptd3.js

Answer №1

When translating your zoomable g to position [100,100], ensure to inform the zoom d3.behavior.zoom() about it. Failure to do so may result in the starting position being at [0,0] and causing a noticeable "jump".

Revise your centerNode function to:

function centerNode(source) {
    scale = zoomListener.scale();
    // x = -source.y0;
    y = -source.x0;
    // x = x * scale + viewerWidth / 2;
    x = 100;
    y = 100;
    // y = y * scale + viewerHeight / 2;
    d3.select('g').transition()
        .duration(duration)
        .attr("transform", "translate(" + x + "," + y + ")scale(" + scale + ")")
    zoomListener.scale(scale);
    zoomListener.translate([x,y]); //<-- inform zoom about the position
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue "The only acceptable numeric escape in strict mode is '' for styled elements in Material-UI (MUI)"

Attempting to utilize the numeric quote for quotation marks, I encountered an issue: 'The sole legitimate numeric escape in strict mode is '\0` The snippet of code causing the problem can be seen below: export const Title = styled(Typogra ...

javascriptcssreactjsmaterial-ui

Implementing SVG in NextJS 13 with custom app directory: A step-by-step guide

Recently, I decided to explore the app directory and unfortunately ran into some issues. One of the main problems I encountered was with image imports. While PNG images imported without any problem, SVG images seemed to break when importing in /app. For i ...

javascriptnext.js

Having trouble using the `.not` function in jQuery

I'm working on implementing a collapsible menu using jQuery. When any header is clicked, the next sibling (the box) should expand while all other boxes collapse. HTML <div class="finbox" id="finbox1"> <div class="finheader" id="finheade ...

javascriptjqueryhtml

Guide on utilizing two separate collections to store different types of data for an application's users

I am looking to create a database collection similar to {username : "jack", password : "pass"} for storing doctors' login information. I believe I can achieve this during signup by implementing the following code: var Doctor = mongoose.model("doctor" ...

javascriptmongodbexpressmongoosepassport.js

Linking two socket.io clients together (Establishing a direct socket-to-socket connection that works across different browsers)

Can a direct P2P connection be established between two browsers using socket.io-client, bypassing the node.js server they are currently connected to? If possible, how? The goal is for clients A and B to communicate directly without going through the node. ...

javascriptnode.jssocketsexpresssocket.io

Neglect to notify about the input text's value

Having trouble retrieving the text from a simple <input id="editfileFormTitleinput" type="text>. Despite my efforts, I am unable to alert the content within the input field. This is the code snippet I've attempted: $('#editfileFormTitleinp ...

javascripthtml

Implement the anti-flickering script for Google Optimize in a NextJS/ReactJS environment

While working on a NextJS/ReactJS project, I am experimenting with setting up Google Optimize for some tests. One issue I have encountered is the flickering effect that occurs when Optimize changes visual elements during experiments. To address this probl ...

javascriptreactjsroutesnext.jsgoogle-optimize

Adding up the values of an array of objects by month using ReactJS

To start off, I'm using ChartJS and need to create an array of months. Here's how it looks: const [generatedMonths, setGeneratedMonths] = useState<string[]>([]) const [totalValues, setTotalValues] = useState<number[]>([]) const month ...

javascriptarraysreactjschart.js

Using jQuery to update a specific item in a list

My current project involves developing an Image Gallery app. It uses <img> tags within li elements. The code snippet is as follows: var $slideR_wrap = $(".slideRoller_wrapper"); var $slidesRoller = $slideR_wrap.find(".slidesRoller"); var $slideR ...

javascriptjqueryhtmlcss

Looking to convert a jQuery function to plain JavaScript code?

Struggling with my homework, I must apologize for any mistakes in my English. My task involves creating a chat using node.js and I found some code snippets on a website "" which I used successfully. The issue now is that the chat relies on old jQuery libr ...

javascriptjquerynode.jsexpresssocket.io

Webpack failing to load jQuery correctly

In the process of transitioning my application.js application into smaller page bundles using SplitChunks, I have encountered a situation in my users/show.html.erb page where I am utilizing the following tag to import the specific chunk. <%= javascript ...

javascriptjqueryruby-on-railswebpack

When using the Three.js FBX loader to add objects to the scene, the newly added objects may not be present in the children array

After following the example provided on threejs.org for loading FBX files, I managed to successfully load my model using the function below: this.obj = null; var loader = new THREE.FBXLoader(); var objs = [] function load_init( object ) { mixer = ne ...

javascriptthree.jscameraloaderfbx

Creating a reverse proxy using next.js

My goal is to set up a reverse proxy for the GeForce NOW website using Next.js, but I'm struggling to make it work. module.exports = { async rewrites() { return [ { source: '/:slug', destination: 'https://pla ...

javascriptproxynext.jsreverse-proxy

Utilize JavaScript when sharing on social media to avoid the possibility of embedding the entire

This javascript code snippet is extracted from www.twitter.com (simply click to view the source code). I have reformatted it for better readability: if (window.top !== window.self) { document.write = ""; window.top.location = window.self.location; s ...

javascriptsecurity

Utilizing regular expressions on a URI parameter in JavaScript

I implemented an ajax function that retrieves three images (PORTRAIT, SQUARE, and LANDSCAPE) from a JSON response: $.ajax({ url: link, method: 'GET', headers: { "Authorization": authToken ...

javascriptajaxregexjson

Access specific data from a jQuery event

How can I retrieve the value of a custom attribute called itemID in order to include it in the URL just like I do with id? Here is the JavaScript code: <script type="text/javascript"> $(document).ready(function(){ $('.eventImage').cl ...

javascriptjqueryhtml

Automatically Refresh a Div Element Every 5 Seconds Using jQuery's setInterval() Function

My goal is to refresh the left div every 5 seconds using $.ajax to get JSON data and display 4 random elements in that div. However, even though the left div block refreshes, the content remains the same with the same images always showing. view image desc ...

javascriptjqueryajax

Do specific href values need to be specified for document.links to return links?

Is there a shortcut to create an array of links in JavaScript without using a loop? var links = document.links; Instead of looping through the array to find elements with href attribute equal to '/somehref', is there a way to directly filter th ...

javascript

Displaying <p> content upon selection of a radio button

As a beginner in JS + HTML, I am looking to create 4 radio buttons with different names like this: o PS4 o Xbox o Nintendo DS When one of these is clicked/checked, I want to display the price which will be located in a "p" tag next to them, like so: o P ...

javascripthtmladdeventlistener

Display open time slots in increments of 15 minutes on Fullcalendar

Currently, I am utilizing the fullcalendar plugin with the 'agendaweek' view. My goal is to showcase the available time slots as clickable and highlight the busy ones with a red background. Handling the highlighting of busy slots is not an issue ...

javascriptjquerycalendarfullcalendar