This [d3.js block] d3b tries to combine the zoom and brush behaviour of d3.
Left click should change the brush (create brush, change brush size, move brush) and middle click shoule move the graph with zoom behaviour (and not change the brush). Mousewheel can be used for zooming.
See [Stack Overflow] so for question regarding the problem.
| <!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> |