畫筆和縮放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並將x2作為this值來設置x縮放域。 實際上，這意味着您正在跑步

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

因為s中只有兩個值，並且this上下文不會影響invert函數。 在可視化方面，這是通過將底部圖表中選擇框邊緣的像素值轉換為大圖表上的日期來設置大圖表所覆蓋的時間范圍。

簡要概述整個功能：

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