|
|
|
|
@ -216,21 +216,6 @@ use `d3.event.stopPropagation();` when events conflict
|
|
|
|
|
|
|
|
|
|
## 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
|
|
|
|
|
|
|
|
|
|
```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
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|