d3 Zoom:禁用鼠标拖动?

Zen*_* Qu 5 user-interface visualization zooming d3.js

我想要在条形图上缩放+画笔。我能够实现缩放 ok: demo here,但我发现缩放后,当您向下拖动鼠标时,条形图会移动。我不希望条形图通过鼠标拖动而移动。我希望条形图保留在原来的位置,并且我想使用鼠标拖动进行刷动。条形图可能可以左右滚动,但不应该左右拖动。

如何使条形图保持在原来的位置?

我的代码片段如下。完整脚本在这里(134 行)

var zoom = d3.behavior.zoom()
      .x(x)
      .scaleExtent([0.8, 10])
      .on("zoom", zoomed);

function zoomed() {
  // scale x axis
  svg.select(".x.axis").call(xAxis);

  // scale the bars
  var width_scaled = columnwidth * d3.event.scale;
  svg.selectAll(".bargroup rect")
    .attr("x", function(d) {return x(d.date) - width_scaled/2;})
    .attr("width", width_scaled);
}

var brush = d3.svg.brush()
    .x(x)
    .on("brush", brushed);

function brushed() {
  //console.log(brush.extent());
}

var svg = d3.select("#timeline").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .call(zoom);

svg.append("g")
      .attr("class", "x brush")
      .call(brush)
    .selectAll("rect")
      .attr("y", -6)
      .attr("height", height + 7);
Run Code Online (Sandbox Code Playgroud)