javascript - D3 通过刷牙的焦点+上下文不显示散点图

Question

我正在尝试复制 this Focus+Context via Brushing例子。我包含相同的布局，但使用散点图而不是线/面积图。

我开始工作this我发现它结合了面积图和散点图的示例。但是，当我废弃面积图时，我失去了缩放/聚焦功能。

我的最后一步(到目前为止不成功)是使画笔(底部的小焦点栏)实际响应主面板(在画笔中选择较小的时间段时使其调整/放大)。画笔按应有的方式调整轴，但我无法使画笔实际调整/缩放主散点图上的点。我不会尝试在画笔中绘制任何内容 - 会有很多点，因此将画笔保持为灰色背景并且没有点就可以了。

这是我的 fiddle :http://jsfiddle.net/fuqzp580/3/

旁注:我无法完全让 jsfiddle 以我使用 d3.csv 的方式工作，因此我用虚拟数据编码了一个稍微修改的版本，而不是使用 d3.csv。不过，我包含了 d3.csv 代码(已注释掉)，以防万一这可能是导致我的问题的原因。

我是 d3 的新手，欢迎任何指点或想法!

Answer 1

这是一个更新的 fiddle ，其中的点在主面板中的点上进行缩放:http://jsfiddle.net/henbox/3uwg92f8/1/

你非常接近，我只做了 3 个小改变:

首先，取消注释 function Brushed() 中已有的用于选择点的代码

其次，全局定义mydots(因为您仅在initialize()内执行此操作，并且需要在该范围之外使用它)。在第 55 行添加了此内容:

var mydots = focus.append("g");

最后(也是最重要的)，我更改了 xMap 的定义

xMap = function(d) { return x2(d.time); } 

至

xMap = function(d) { return x(d.time); } 

刷牙时，更新的是 x 比例，而不是 x2