javascript - 画笔和缩放 d3

Question

我正在遵循本指南:https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172

你能解释一下这行吗？谢谢

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

Answer 1

对于上下文，这是来自一些实现图表刷的代码:

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.event是刷牙事件)

线路

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

通过在数组s中的每个项目上运行x2.invert来设置x比例域，其中x2为this 值。实际上，这意味着您正在运行

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

因为 s 中只有两个值，并且 this 上下文不会影响 invert 函数。从可视化的 Angular 来看，这是通过将底部图表中选择框边缘的像素值转换为大图表上的日期来设置大图表所覆盖的时间跨度。

简单总结一下整个功能:

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