Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Why is the circle position in a D3 chart not proportionally tracking with mouse during a Drag operation?

Posted on 2013-11-25
2
429 Views
Last Modified: 2013-12-05
I'm relatively new to the world of D3, charting and visualizations.
I have a bubble chart with connected lines (see attached image).
I have the x/y scales set up so that the points plot and display correctly.

I am running into issues when I attempt to drag a circle (bubble) to
change it's height (y value) within the chart. I get the drag event and am able to
move the selected circle shape.

The issue is that the movement/new placement of the circle shape within the chart is
not proportional to the mouse movements. I'm pretty sure that it has something to do with scaling the d3.event.dy value so it matches the chart's y axis scale.

Here is my on drag handling code snippet:
var drag = d3.behavior.drag()
        .origin(function() { 
                var t = d3.select(this);
                return {x: t.attr("x"), y: t.attr("y")};
            })
        .on("dragstart", function(d,i) {
			
              // Set the style of the dragged node
              d3.select(this)
                  .style("fill", "red")
                  .attr("stroke", "orange")
                  .attr("stroke-width", 4)                
                  .attr("r", function(d){ return d.radius * 2 });
 
        })
        .on("drag", function(d,i) {

            // We are only tracking vertical movement, so we are only interested in dY changes.
                   
             d3.select(this)
			
               .attr("cx", function(d, i) {
                    xlocation=xScale(d.x_axis);
                    ylocation=yScale(d.y_axis);
                    return xScale(d.x_axis);
                })
			   
                .attr("cy", function(d, i) {
                    d.y_axis -= d3.event.dy;
                    return yScale(d.y_axis);
                });
      })

Open in new window



Thanks in advance for taking your advice.
JohnB
Chart-Snapshot.PNG
0
Comment
Question by:jxbma
  • 2
2 Comments
 
LVL 1

Accepted Solution

by:
jxbma earned 0 total points
ID: 39699268
The issue was tat I was confusing scaled points/cords with non-scaled points/cords for the cy. If I make the following changes, it all works now.
			   
                .attr("cy", function(d, i) {
		    
                    var y1 = yScale(d.y_axis) + d3.event.dy;
                    d.y_axis = yScale.invert(y1);
                    
                    return y1;
                });

Open in new window

0
 
LVL 1

Author Closing Comment

by:jxbma
ID: 39699272
It was a matter of confusing non-scaled and scaled coordinates/points.
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
jquery + C#.net radiobuttonlist 3 30
convert Systemjs to Webpack 3 29
Set time on Session (ASP) 14 22
On Load function does not trigger on iPhone 4 32
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question