Javascript 笔刷和缩放d3

我遵循以下指南：

你能解释一下这句话吗？谢谢

x.domain(s.map(x2.invert, x2));

---

对于上下文，这来自于实现图表清理的一些代码：

function brushed() {
  if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return; // ignore brush-by-zoom
  var s = d3.event.selection || x2.range();
  x.domain(s.map(x2.invert, x2));
  focus.select(".area").attr("d", area);
  focus.select(".axis--x").call(xAxis);
  svg.select(".zoom").call(zoom.transform, d3.zoomIdentity
      .scale(width / (s[1] - s[0]))
      .translate(-s[0], 0));
}

我们已经将

x

和

x2

初始化为两个时间刻度：

var x = d3.scaleTime().range([0, width]),
x2 = d3.scaleTime().range([0, width])

而

s

被初始化为

var s = d3.event.selection || x2.range();

（其中，

d3.事件

为刷牙事件）

线路

x.domain(s.map(x2.invert, x2));

通过运行

x2设置
x
缩放域。使用
x2
作为
此
值，对数组
s
中的每个项目反转
。实际上，这意味着你正在跑步

x.domain( x2.invert( s[0] ), x2.invert( s[1] ) );

由于
s
中只有两个值，因此
此
上下文不会影响
反转
功能。在可视化方面，这是通过将底部图表中选择框边缘的像素值转换为大型图表上的日期来设置大型图表覆盖的时间跨度

简要总结整个功能：

function brushed() {
  if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return; // ignore brush-by-zoom
  // get the edges of the selection box or use the maximum values (in x2.range)
  var s = d3.event.selection || x2.range();
  // convert those pixel values into dates, and set the x scale domain to those values
  x.domain(s.map(x2.invert, x2));
  // redraw the top graph contents to show only the area within the x domain
  focus.select(".area").attr("d", area);
  // redraw the top graph's x axis with the updated x scale domain
  focus.select(".axis--x").call(xAxis);
  // zoom the overlay of the top graph to reflect the new x domain
  // so that any zoom operations will scale correctly
  svg.select(".zoom").call(zoom.transform, d3.zoomIdentity
      .scale(width / (s[1] - s[0]))
      .translate(-s[0], 0));
}

是的，我找不到这条线的确切用途@github上的rioV8On没有逐行解释清楚没有逐个函数