使用具有缩放功能的组 - 准确转换问题

Question

我正在尝试自定义Brush & Zoom示例以使用组。我有一个关于我的尝试here

的实例

红色圆圈只是形状。每个绿色矩形都是一个矩形的组。我正在努力弄清楚如何翻译这些群体。如图所示，green rect groups的翻译不准确。

我一直在寻找例子等等，但却找不到任何例子。毫无疑问，这很简单。有人能告诉我我做错了什么吗？我正在使用的缩放代码如下（工作示例为here）

function zoomed() {
  if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return;
  var t = d3.event.transform;
  x.domain(t.rescaleX(x2).domain());
  focus.select(".area").attr("d", area);

  // GREEN RECT GROUPS
  var boxGroups = focus.selectAll("g.box-group")
         .attr("transform",function(d,i){
              return  "translate(" + x(d.date) + "," + 0 + ")"
         });

  // RED CIRCLES
  focus.selectAll("circle.circus").attr("cx", function (d, i) { return x(d.date); })

 // other code from original example deleted for clarity       
}

Answer 1

当您最初定位rects时，可以通过设置rect本身的x和y属性来实现。但是，当您更新时，您正在翻译rects parent g（并且仍然将x位置保留在rect上）。这产生了“双倍”的位置。真的，我无法理解为什么你将每个矩形包装在它自己的g中，删除它并继续按x属性定位它们。

这是一个更新的block。

顺便说一下，你还需要将clip-path: url(#clip);应用到你的圈子中，以防止它们流入剧情的轴线。