|
|
|
|
@ -219,13 +219,16 @@ use `d3.event.stopPropagation();` when events conflict
|
|
|
|
|
### Dragging
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
var drag = d3.behavior.drag()
|
|
|
|
|
.on('dragstart', dragStart)
|
|
|
|
|
//create the behavior
|
|
|
|
|
var drag = d3.drag()
|
|
|
|
|
.on('start', dragStart)
|
|
|
|
|
.on('drag', drag)
|
|
|
|
|
.on('dragend', dragEnd);
|
|
|
|
|
//....
|
|
|
|
|
dotsGroup.call(drag);
|
|
|
|
|
.on('end', dragEnd);
|
|
|
|
|
//...
|
|
|
|
|
//apply it to a selection
|
|
|
|
|
d3.selectAll('circle').call(drag);
|
|
|
|
|
//....
|
|
|
|
|
//define callbacks
|
|
|
|
|
function dragStart(d){ //d is the data for the dragged object
|
|
|
|
|
d3.select(this); //the visual object
|
|
|
|
|
d3.event.x; //x position of cursor
|
|
|
|
|
@ -233,6 +236,8 @@ function dragStart(d){ //d is the data for the dragged object
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
You can use the xScale.invert and yScale.invert to get data from d3.event.x and d3.event.y
|
|
|
|
|
|
|
|
|
|
### Zooming
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
@ -248,9 +253,6 @@ function zoomed(){
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
You can use the xScale.invert and yScale.invert to get data from d3.event.x and d3.event.y
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Basic Layouts
|
|
|
|
|
- https://github.com/d3/d3/wiki/Plugins
|
|
|
|
|
- http://c3js.org/
|
|
|
|
|
|