score:5

Accepted answer

Check out the docs on zoom.filter. A little confusing but this is what's suppressing the secondary buttons.

Something like:

.filter(function(){
  return (event.button === 0 ||
          event.button === 1);
})

would allow zooming/panning with left and middle buttons.


<!DOCTYPE html>
<meta charset="utf-8">
<style>
  .axis path {
    display: none;
  }
  
  .axis line {
    stroke-opacity: 0.3;
    shape-rendering: crispEdges;
  }
  
  .zoom {
    fill: none;
    pointer-events: all;
  }
  
  .view {
    fill: url(#gradient);
    stroke: #000;
  }
</style>
<svg width="960" height="500">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0.0%" stop-color="#2c7bb6"></stop>
      <stop offset="12.5%" stop-color="#00a6ca"></stop>
      <stop offset="25.0%" stop-color="#00ccbc"></stop>
      <stop offset="37.5%" stop-color="#90eb9d"></stop>
      <stop offset="50.0%" stop-color="#ffff8c"></stop>
      <stop offset="62.5%" stop-color="#f9d057"></stop>
      <stop offset="75.0%" stop-color="#f29e2e"></stop>
      <stop offset="87.5%" stop-color="#e76818"></stop>
      <stop offset="100.0%" stop-color="#d7191c"></stop>
    </linearGradient>
  </defs>
</svg>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
  var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

  var x = d3.scaleLinear()
    .domain([-1, width + 1])
    .range([-1, width + 1]);

  var y = d3.scaleLinear()
    .domain([-1, height + 1])
    .range([-1, height + 1]);

  var xAxis = d3.axisBottom(x)
    .ticks((width + 2) / (height + 2) * 10)
    .tickSize(height)
    .tickPadding(8 - height);

  var yAxis = d3.axisRight(y)
    .ticks(10)
    .tickSize(width)
    .tickPadding(8 - width);

  var view = svg.append("rect")
    .attr("class", "view")
    .attr("x", 0.5)
    .attr("y", 0.5)
    .attr("width", width - 1)
    .attr("height", height - 1);

  var gX = svg.append("g")
    .attr("class", "axis axis--x")
    .call(xAxis);

  var gY = svg.append("g")
    .attr("class", "axis axis--y")
    .call(yAxis);

  var zoom = d3.zoom()
    .scaleExtent([1, 40])
    .translateExtent([
      [-100, -100],
      [width + 90, height + 100]
    ])
    .on("zoom", zoomed)
    .filter(function(){
      return (event.button === 0 ||
              event.button === 1);
    })

  svg.append("rect")
    .attr("class", "zoom")
    .attr("width", width)
    .attr("height", height)
    .call(zoom);

  function zoomed() {
    view.attr("transform", d3.event.transform);
    gX.call(xAxis.scale(d3.event.transform.rescaleX(x)));
    gY.call(yAxis.scale(d3.event.transform.rescaleY(y)));
  }
</script>


Related Query