d3 zoom:禁用鼠标拖动?

时间:2014-05-23 06:18:06

标签: user-interface d3.js zoom visualization

我想在条形图上使用缩放+画笔。我能够实现缩放确定:demo here,但我发现在缩放后,当您向下鼠标拖动时,条形图会移动。我不希望条形图移动鼠标拖动。我希望条形图保持原来的位置,我想用鼠标拖动进行刷牙。条形图可能左右滚动,但不应左右拖动。

如何使条形图保留在原始位置?

我的代码段如下。 Full script here (134 lines)

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);

0 个答案:

没有答案