javascript d3.js : initialize brush with brush. extent 并阻止数据溢出 margin

Question

我有 2 个问题想用我当前基于 this 的 d3 应用程序修复:

这是 fiddle :http://jsfiddle.net/zoa5m20z/

1. 我想初始化我的笔刷，以便在应用程序启动时默认只刷一小部分特定部分。我用 .extent 尝试了以下操作，但没有成功。

   //date parsing function
   var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;
   
   //setting up brush and defaultExtent
   var brush = d3.svg.brush()
   .x(x2)
   .extent([parseDate("2014-08-11 10:20:00"), parseDate("2014-08-11 18:20:00")]) //trying to intialize brush
   .on("brush", brushed);
   

2. 我想阻止我绘制的圆圈与 yaxis 重叠。我只想在画笔移动时在 y 轴右侧绘制/显示圆圈。就像规范的 Bostock Focus+Context via Brushing Block .我尝试调整边距和尺度、域、范围，但都无济于事。

我要避免的事情:

我是 d3.js 的新手，所以欢迎并感谢所有提示和建议!

Answer 1

对于你的第一个问题，你需要调用 brush.event 让画笔拾取新的范围。

  brush = d3.svg.brush()
      .x(x)
      .extent([config.start, d3.time.day.offset(config.start, config.range)])
      .on("brush", brushmove)
      .on("brushend", brushend);

  gBrush = svg.select('.brush')
    .call(brush);

  gBrush.call(brush.event);

对于你的第二个问题，我通常只是过滤掉笔刷范围之外的数据，这样我就只绘制可见数据。这是一个将在您的画笔移动/缩放事件中调用的示例:

  // update the data so that only visible points are shown
  var points= svg.selectAll('.point')
      .data(function(d) { return onScreen(d, brush.extent); },
            function(d) { return d.id; });

  // draw the points that are now onscreen
  var pointsEnter = points.enter().append('g').attr('class', 'point');

  // remove any points that are now offscreen
  points.exit().remove();

  // up date the x/y position of your points based on the new axis.
  // ... left up to you

为点设置一个唯一的 id 是很有帮助的，这样它们就可以随着画笔的移动而被转换到它们的新位置，而不必销毁它们并重新绘制它们。

我在 http://bl.ocks.org/bunkat/1962173 有一个使用这些技术的示例.