D3焦点+上下文通过刷不显示散点图

D3 Focus+Context via Brushing not displaying scatterplot

本文关键字：显示散点图焦点上下文 D3 更新时间：2023-09-26

我正试图通过Brushing示例复制这个Focus+Context。我包含了相同的布局，但使用散点图而不是线/面积图。

我开始研究我发现的这个例子，它结合了面积图和散点图。然而，当我放弃面积图时，我会失去缩放/聚焦功能。

我的最后一步（到目前为止还没有成功）是使画笔（底部的小焦点条）真正响应主面板（当画笔中选择较小的时间段时，使其调整/放大）。笔刷可以调整轴，但我只是无法让笔刷真正调整/缩放主散点图上的点。我没有试图在画笔中绘制任何东西——会有很多点，所以保持画笔为灰色背景，没有点是可以的。

这是我的小提琴：http://jsfiddle.net/fuqzp580/3/

旁注：我无法让jsfiddle以我使用d3.csv的方式工作，所以我用伪数据编码了一个稍微修改过的版本，而不是使用d3.csv。然而，我包含了d3.csv代码（注释掉了），以防这可能是我的问题的原因。

我是d3的新手，所以欢迎任何建议或想法！

这是一个更新的小提琴，它在主面板中缩放点：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