Improve company productivity with a Business Account.Sign Up

x
?
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
Medium Priority
?
452 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

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…

607 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