How to drag'n'drop on a scatter chart

Question

I have a scatter chart, and I want to be able to move the points, to drag them The problem is that it's not like a canvas, I apparently can't use eventgetX() or getSceneX() because there is the axis, which are not at the same position depending on the size of the scene, so the 0/0 is clearly not set depending of the chart, and if i changes the size of the scene, the distance : border/axis changes too

The code related to :

<ScatterChart fx:id="chart" onDragDetected="#chartDragDetected"

in the .fxml

and :

//The method associated with the chart    
@FXML
    void chartDragDetected(MouseEvent event) {
        //Lots of try to find the coordinate but they change 
        //depending of the size of the scene
    }

.

//in the initialize, populating the chart
double res=0;
for (double x = fct.getInf(); x<=fct.getSup(); x+=0.05 ){ //precision of graph
    res = fct.f_de_x(x);
    Data<Number,Number> dt = new Data<Number, Number>(x, res);
    series.getData().add(dt);
}
chart.getData().add(series);

in the controller

Posting code is not so that we know you've done your homework (contrary to popular belief, this is actually a site primarily aimed at professional programmers, not for people to solve homework problems, though of course anyone is welcome to ask here); it is so that we have a starting point to understand what you are stuck on. This snippet doesn't help much; what node is this handler registered with? If it's the chart itself, wouldn't it be easier if you registered handlers with the nodes from each data point? — James_D, Jan 28 '17 at 18:31
@James_D it' not my homework, as I see every day, it's not "profesionnal programmers" who are comming here, not only clearly It's people of everywhere asking about their work, it's a 8 month project, and I'm asking the community on one point, representing about 20% of my project The method is called here : ` i can't set handler on this, i tried i think — azro, Jan 28 '17 at 19:34
You said "I'm on a school project". But my point was not about the project, my point was about the purpose of having you post code. Please read the help pages, particularly [this](http://stackoverflow.com/help/mcve). After adding the data to the series, call [`data.getNode()`](http://docs.oracle.com/javase/8/javafx/api/javafx/scene/chart/XYChart.Data.html#getNode--) and set the handler on the result that's returned. Then you can update the value of the data when the node is dragged. — James_D, Jan 28 '17 at 21:19
@James_D thanks so much, it was the key missing for my comprehension, I'll surely post some code in answer when this will completely working, but I'm pretty near now, thanks again — azro, Jan 28 '17 at 23:08

score 0 · Accepted Answer · edited Feb 17 '17 at 14:30

So, to publish the code in answer, if maybe it will be useful for someone a day : In the initialize method of my controller :

chart.getData().get(0).getData().forEach(data->new DnDToMoveData(data));

So DnDtoMoveData is an intern class, and this what it looks like :

public class DnDToMoveData{
    double pressPositionX;
    double pressPositionY;

    DnDToMoveData(Data<Number, Number> data){
        data.getNode().setOnMousePressed(event->{
            pressPositionX = event.getSceneX();
            pressPositionY = chart.getHeight()-event.getSceneY();  
        });

        data.getNode().setOnMouseDragged(event->{
            data.setXValue(data.getXValue().doubleValue()+event.getSceneX())
            this.pressPositionX);
            data.setYValue(data.getYValue().doubleValue()+event.getSceneY())-this.pressPositionY);

            pressPositionX = event.getSceneX();
            pressPositionY = chart.getHeight()-event.getSceneY();
         });
    }
}

So i have implemented 2 methods, onClick to get the starting point of the event, and then move the point depending on the event's location There is some improvements to do, because the distance in pixel of the event does not match with the scale of the chart so it makes bad things, but in fact it works

How to drag'n'drop on a scatter chart

1 Answers1