Troubleshooting Problems when Resizing Objects in AngularJS and d3js

In my current project, I am working on integrating AngularJS with d3 for drag and resizing functionalities. So far, I have successfully created a draggable rect object within an SVG element that can be resized using handles. However, I have noticed that resizing becomes choppy when attempting to resize in the north or east direction. To demonstrate this issue, I have prepared a Plunk available at http://plnkr.co/tG19vpyyw0OHMetLOu2U. (Please note that the demo has been simplified to highlight the problem by featuring only one resize handle.)

Although dragging is functioning correctly, resizing towards the west and south directions works without any issues (which are not shown in the demo).

I thought it would be beneficial to reach out to the community and inquire if anyone else has encountered this particular challenge. I appreciate any insights or suggestions provided by all of you. Thank you.

javascriptangularjssvgd3.js

Answer №1

The issue arises from the fact that modifications are being made to both the rect element and its enclosing g element simultaneously. This creates a slight delay between adjusting the size of the rect and the position of the g, as these changes require separate commands. During this brief delay, the cursor position relative to the drag rectangle shifts, triggering a new drag event with values that reflect an inconsistent intermediate state. While this inconsistency is swiftly rectified once attributes for both elements have been updated, it can result in a visible flicker.

To resolve this issue, it's advisable to modify the size and position of just the rect, without altering the g element. Although this approach may make the code less elegant by necessitating adjustments to the drag rectangle's position, it effectively mitigates timing inconsistencies.

Therefore, the code for myrect should be adjusted as follows:

var myRect = d3.select(document.createElementNS("http://www.w3.org/2000/svg", "rect"))
            .attr("data-ng-width", "{{square.w}}")
            .attr("data-ng-height", "{{square.h}}")
            .attr("stroke", "yellow")
            .attr("stroke-width", 3)
            .attr("fill-opacity", 0)
            .attr("data-ng-x", "{{square.x}}")
            .attr("data-ng-y", "{{square.y}}");

and for resizer:

var resizer = myGroup.append("rect")
            .attr("width", 5)
            .attr("height", 5)
            .attr("stroke", "blue")
            .attr("stroke-width", 1)
            .attr("fill-opacity", 0)
            .attr("cursor", "nw-resize")
            .attr("x", "{{square.x-2.5}}")
            .attr("y", "{{square.y-2.5}}")
            .call(nresize);

I've incorporated this solution into your code, which you can view here.

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

Tips for filling a Rails dropdown list using a JSON array

My Ant show page showcases detailed information about different types of ants. There are two drop downs on the page - one for environment: [indoor, outdoor], and another for diet: [sugar, fat, protein]. When a parameter is selected from each dropdown, it ...

javascriptruby-on-railsjsonjquery

Is it possible to automate the firing of setTimeout events using WebDriver?

Looking to test pages with numerous setTimeout functions, I'm searching for a way to expedite the code execution upon page load rather than waiting for it to run on its own. One idea is to inject custom JavaScript like this into the page before evalu ...

javascriptseleniumwebdriverchromium

display or conceal a div when a radio button is selected

I need a way to display a specific div containing unique text once a radio button is selected, while hiding all other div sections. <?php foreach ($items as $item){ $i=1; echo ' <div class="form-check"> <input class="fo ...

javascriptphphtmlcss

Error message stating that the callback function was not triggered by the injected JSONP script in Angular

Currently, I am running an application on localhost://3000 using npm server. Here is the content of my services file: import {Injectable} from "@angular/core"; import {Jsonp} from "@angular/http"; import 'rxjs/add/operator/map'; @Injectable() ...

javascriptangularjsonp

HTML animation effect on subpage with a URL modification [LATEST UPDATE]

Can you smoothly load a new subpage in the background, update the URL, and fade it in while an animation is playing on the previous page? Check out this example (jsFiddle) to see a simple animation: $(document).ready(function() { 'use strict&apo ...

javascriptjqueryhtmlcss

Tips for showcasing a string value across various lines within a paragraph using the <br> tag for line breaks

I'm struggling to show a string in a paragraph that includes tags to create new lines. Unfortunately, all I see is the br tags instead of the desired line breaks. Here is my TypeScript method. viewEmailMessage(messageId: number): void { c ...

javascripthtmlangulartypescript

Tips for incorporating a spinner during content loading within AngularJS

When the user clicks on the "Search" button, content will load and the button label will change to "Searching" with a spinner shown while the content is loading. Once the content has loaded (Promise resolved), the button label will revert back to "Search" ...

javascriptangularjstwitter-bootstrap

Leveraging ng-switch for template swapping

I'm currently facing an issue in my Angular app where I want to switch from a "sign in" form to a "sign up" form when the user clicks on the "Sign Up" button, but nothing happens upon clicking the button. The sign-in form persists on the screen withou ...

javascriptangularjsng-switch

Rendering a React component conditionally within the same line

I'm trying to conditionally render a Home component based on a certain condition. I attempted to utilize the Inline If-Else with Conditional Operator recommended by React, as explained in this source. The code snippet I have looks like this: import ...

javascriptreactjsmaterial-ui

Chrome browser experiencing cursor focus challenge with React.js

I recently created a basic React class that displays a controlled input field for numbers. var Form = React.createClass({ getInitialState: function() { return { value: 12.12 }; }, handleChange: function(e) { this.setState({ value: e.target. ...

javascriptgoogle-chromereactjs

Find the elements of <a> tags specifically without the attribute href

Currently, I am extracting the class of all <a> elements in an HTML document of a webpage using VB.net from a WinForm: Dim htmlLinks As HtmlElementCollection = WebBrowser1.Document.GetElementsByTagName("a") For Each link As HtmlElement In htmlLi ...

javascriptjqueryhtmlcssvb.net

Position-Scrolling Attribute

While exploring this angularJS app example (), I came across an attribute named scroll-position in the following div tag that is set to "scrolled": <div class="page-top clearfix" scroll-position="scrolled" max- height="50" ng-class="{'scrolled&ap ...

htmlcssangularjsattributes

Incorporating Bootstrap Extensions into Angular 8

Recently delving into Angular, I've been attempting to incorporate a Bootstrap Plugin called Bootstrap Toggle into Angular 8. Below are the steps I've taken: First, I installed bootstrap, jquery, popper.js, and bootstrap-toggle. In the angular. ...

javascriptangulartwitter-bootstrapbootstrap-4

Obtain the numerical value of the vertical position of the mouse (

Currently, I am coding a JavaScript game and my objective is to designate a variable specifically for the Y axis of the mouse. I kindly request that the code be kept as simple and straightforward as possible, avoiding unnecessary complexity. That conclud ...

javascripthtmlvariablesyaxis

What is the purpose of the c() function in JavaScript?

I recently stumbled upon some interesting JavaScript code in the source of a web page: function fsb329142055() { var b=new Array(57,50,102,50,52,99,50,53,52,56,102,98,102,98,101,102,101,49,53,61,101,99,110,57,111,78,109,54,114,111,56,48,102,38,1 ...

javascripthtmlforms

Why is jQuery button function only functioning for the first button?

I'm encountering an issue with my table of records. Each row in the table has a submit button that triggers an AJAX request to the server when clicked. Strangely, the first button works perfectly and sends the request as expected. However, subsequent ...

javascripthtmljquery

Developing an npm module that is compatible with both web browsers and Node.js

Currently, I am in the process of developing an npm package that will cater to both web apps and other node modules. If my focus was solely on browsers, I would simply assign window.myExport = myExport; as a direct solution (unless there is a more contemp ...

javascriptnode.jsnpmnode-moduleses6-modules

The array is filled with values, however, there seems to be an issue preventing their access. What could possibly be causing this obstacle

After receiving two string values through a callback function, let's call them a and b, I attempt to store them in an array. However, when I check the array using console.log, it only displays the values if I expand the array by clicking on the arrow ...

javascriptangulartypescript

Navigating through nested JSON objects in React to display data effectively

I have been struggling for hours to find a solution to this problem with no success. I really need your assistance. The task at hand involves looping through a JSON file and creating a user interface that consists of multiple columns, each containing vari ...

javascriptarraysjsonreactjsjsx

Issue with ng-show toggle functionality not functioning correctly within a custom directive

I am facing an issue with my directive that is responsible for displaying the sidebar in my application. I have tried to implement code that would toggle the content inside the sidebar when triggered, but unfortunately, nothing happens when I attempt to to ...

angularjsangularjs-directiveng-showangularjs-ng-transclude