do dragging before zooming

master
Matt Huntington 9 years ago
parent aae458ac74
commit ea318c5d23

30
D3.md

@ -216,21 +216,6 @@ use `d3.event.stopPropagation();` when events conflict
## Behaviors ## Behaviors
### Zooming
```javascript
//generator for a behavior
//scale from 1 - 10
//.on function says, when there's an event of type 'zoom', call the 'zoomed' function. Could be any event
var zoom = d3.behavior.zoom().scaleExtent([1,10]).on('zoom', zoomed);
var svg = d3.select('#viz-wrapper').append('svg').call(zoom);
function zoomed(){
console.log(d3.event.translate);//get mouse position
console.log(d3.event.scale);//bounded by 1,10 as set up above
viz.attr('transform', 'translate(' + d3.event.translate + ')' + 'scale(' + d3.event.scale + ')');
}
```
### Dragging ### Dragging
```javascript ```javascript
@ -248,6 +233,21 @@ function dragStart(d){ //d is the data for the dragged object
} }
``` ```
### Zooming
```javascript
//generator for a behavior
//scale from 1 - 10
//.on function says, when there's an event of type 'zoom', call the 'zoomed' function. Could be any event
var zoom = d3.behavior.zoom().scaleExtent([1,10]).on('zoom', zoomed);
var svg = d3.select('#viz-wrapper').append('svg').call(zoom);
function zoomed(){
console.log(d3.event.translate);//get mouse position
console.log(d3.event.scale);//bounded by 1,10 as set up above
viz.attr('transform', 'translate(' + d3.event.translate + ')' + 'scale(' + d3.event.scale + ')');
}
```
You can use the xScale.invert and yScale.invert to get data from d3.event.x and d3.event.y You can use the xScale.invert and yScale.invert to get data from d3.event.x and d3.event.y

Loading…
Cancel
Save