|
<!DOCTYPE html> |
|
<meta charset="utf-8"> |
|
<style> |
|
|
|
.axis path, |
|
.axis line { |
|
fill: none; |
|
stroke: #000; |
|
shape-rendering: crispEdges; |
|
} |
|
|
|
.brush .extent { |
|
stroke: #000; |
|
fill-opacity: .125; |
|
shape-rendering: crispEdges; |
|
} |
|
|
|
</style> |
|
<body> |
|
<script src="http://d3js.org/d3.v3.js"></script> |
|
<!--<script src="http://d3js.org/d3.v3.min.js"></script>--> |
|
<script> |
|
|
|
var data = [5,10,-3,100, 123, 11, 225]; |
|
|
|
var margin = {top: 20, right: 40, bottom: 40, left: 40}, |
|
width = 960 - margin.left - margin.right, |
|
height = 500 - margin.top - margin.bottom; |
|
|
|
var xscale = d3.scale.linear() |
|
.domain([0, data.length]) |
|
.range([0, width]); |
|
|
|
var yscale = d3.scale.linear() |
|
.domain(d3.extent(data)) |
|
.range([height, 0]); |
|
|
|
var zoom = d3.behavior.zoom() |
|
.x(xscale) |
|
.y(yscale) |
|
.on("zoomstart", zoom_start) |
|
.on("zoom", zoomed) |
|
.on("zoomend", zoom_end); |
|
|
|
var svg = d3.select("body").append("svg") |
|
.attr("width", width + margin.left + margin.right) |
|
.attr("height", height + margin.top + margin.bottom) |
|
.append("g") |
|
.attr("class", "zoom-rect") |
|
.attr("transform", "translate(" + margin.left + "," + margin.top + ")") |
|
.on("mousedown", mousedowned) |
|
.call(zoom); |
|
|
|
svg.append("rect") |
|
.attr("width", width) |
|
.attr("height", height) |
|
.style("fill", "none") |
|
.style("pointer-events", "all"); |
|
|
|
|
|
var brushstart = function(){ |
|
|
|
console.log("brushstart" + this); |
|
console.log(d3.event); |
|
}; |
|
|
|
var brushmove = function(){ |
|
|
|
console.log("brush" + this); |
|
console.log(d3.event); |
|
}; |
|
|
|
var brushend = function(){ |
|
console.log("brushend" + this); |
|
console.log(d3.event); |
|
}; |
|
|
|
// brush for selecting areas |
|
var make_brush = d3.svg.brush() |
|
.on("brushstart", brushstart) |
|
.on("brush", brushmove) |
|
.on("brushend", brushend) |
|
.x(xscale); |
|
|
|
|
|
var check_mousemove = function(){ |
|
var stop = d3.event.button != 0; |
|
if (stop) d3.event.stopImmediatePropagation(); // stop zoom |
|
|
|
var new_click_event = new Event('mousedown'); |
|
new_click_event.pageX = d3.event.pageX; |
|
new_click_event.clientX = d3.event.clientX; |
|
new_click_event.pageY = d3.event.pageY; |
|
new_click_event.clientY = d3.event.clientY; |
|
console.log("redirect to zoom"); |
|
console.log(new_click_event); |
|
|
|
svg.node() |
|
.dispatchEvent(new_click_event); |
|
|
|
}; |
|
|
|
|
|
svg.append("g") |
|
.attr("class", "x brush") |
|
.attr("width", width ) |
|
.attr("height", height ) |
|
//.on("mousedown", check_mousemove) |
|
//.on("mousemove", check_mousemove) |
|
.call(make_brush) |
|
//.call(zoom) |
|
.selectAll("rect") |
|
.attr("height", height); |
|
|
|
var container = svg.append("g"); |
|
|
|
var line = d3.svg.line() |
|
.x(function(d,i) {return xscale(i)}) |
|
.y(function(d) {return yscale(d)}); |
|
|
|
container.append("g") |
|
.attr("class", "lines") |
|
.append("path") |
|
.attr("class", "line") |
|
.datum(data) |
|
.attr("d", line) |
|
.style("fill", "none") |
|
.style("stroke", "#000"); |
|
|
|
function make_axis(scale, orient){ |
|
return d3.svg.axis() |
|
.scale(scale) |
|
.orient(orient) |
|
} |
|
|
|
// create axis |
|
container.append("g") |
|
.attr("class", "axis axis--x") |
|
.attr("transform", "translate(0," + height + ")") |
|
.call(make_axis(xscale, "bottom")); |
|
|
|
container.append("g") |
|
.attr("class", "axis axis--y") |
|
.call(make_axis(yscale, "left")); |
|
|
|
|
|
function zoom_start(){ |
|
console.log("zoom start"); |
|
console.log(d3.event); |
|
} |
|
|
|
function zoomed() { |
|
d3.select(".axis--x") |
|
.call(make_axis(xscale, "bottom")); |
|
|
|
d3.select(".axis--y") |
|
.call(make_axis(yscale, "left")); |
|
|
|
d3.select(".line") |
|
.attr("d", line); |
|
} |
|
|
|
function zoom_end(){ |
|
console.log("zoom end"); |
|
console.log(d3.event); |
|
} |
|
|
|
function mousedowned() { |
|
var stop = d3.event.button != 1; |
|
if (stop) d3.event.stopImmediatePropagation(); // stop zoom |
|
|
|
|
|
svg.append("circle") |
|
.attr("transform", "translate(" + d3.mouse(this) + ")") |
|
.attr("r", 1e-6) |
|
.style("fill", "none") |
|
.style("stroke", stop ? "red" : "green") |
|
.style("stroke-width", "3px") |
|
.style("stroke-opacity", 1) |
|
.transition() |
|
.ease(Math.sqrt) |
|
.duration(500) |
|
.attr("r", 12) |
|
.style("stroke-opacity", 0) |
|
.each("end", function() {d3.select(this).remove()}); |
|
} |
|
|
|
</script> |