画笔和缩放 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函数。在可视化方面，这是通过将底部图表中选择框边缘的像素值转换为大图表上的日期来设置大图表覆盖的时间跨度。

简要总结一下整个函数：

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