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

Question

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

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

我一直在寻找示例等，但没有找到。这无疑是非常简单的。有人可以告诉我我做错了什么吗？我正在使用的缩放代码如下(工作示例是 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

当您最初定位矩形时，您可以通过设置矩形本身的x和y属性来实现。但是，当您更新时，您正在翻译父矩形 g (并且仍然保留矩形上的 x 位置)。这产生了位置的“加倍”。真的，我不明白为什么你将每个矩形包装在它自己的 g 中，删除它并继续通过 x 属性定位它们。

这是更新的 block .

顺便说一句，您还需要将 clip-path: url(#clip); 应用到您的圆圈和矩形，以防止它们渗入绘图的轴。