Update data after a drag

master
Matt Huntington 9 years ago
parent d31dbc0ccd
commit 99de7df3c8

@ -18,6 +18,7 @@
1. Create click handler
1. Remove data
1. Drag an element
1. Update data after a drag
## Add link to d3 library
@ -584,3 +585,27 @@ var dragBehavior = d3.drag() //create a drag behavior
// .on('end', dragEnd); //dragEnd is a reference to a function we haven't created yet
d3.selectAll('circle').call(dragBehavior); //attach the dragBehavior behavior to all <circle> elements
```
## Update data after a drag
- Uncomment the `.on('end', dragEnd)` code
- Create the callback function
```javascript
var dragEnd = function(datum){
var x = d3.event.x; //get current x position of the cursor
var y = d3.event.y; //get current y position of the cursor
var date = xScale.invert(x); //get the date by using the xScale to invert the x position of the mouse
var distance = yScale.invert(y); //get the distance by using the yScale to invert the y position of the mouse
//since datum is an object, which is are passed by reference, we can update a property on the object, and the original variable will update
datum.date = formatTime(date); //use formatTime() to convert the date variable, which is a Date object, into the appropriate string
datum.distance = distance; //change the distance
createTable(); //redraw the table
}
var dragBehavior = d3.drag()
// .on('start', dragStart)
.on('drag', drag)
.on('end', dragEnd);
```

Loading…
Cancel
Save