D3 Focus + Context通过笔刷不显示散点图

Question

I'm trying to replicate this Focus+Context via Brushing example. I'm including the same layout, but with a scatterplot instead of a line/area plot.

I started working off this example I found which combines the area plot and a scatterplot. However, when I scrap the area plot, I lose the zoom/focus capability.

My last step (thus far unsuccessful) is to make the brush (small focus bar on the bottom) actually respond to the main panel (make it adjust/zoom in when smaller time periods are selected in the brush). The brush adjusts the axis as it should, but I just haven't been able to make the brush actually adjust/zoom the points on the main scatterplot. I'm not trying plot anything in the brush - there will be a lot of points, so keeping the brush with a grey background and no points is fine.

here's my fiddle: http://jsfiddle.net/fuqzp580/3/

Sidenote: I can't quite get the jsfiddle to work with the way I'm using d3.csv , so I coded up a slightly altered version with dummy data in lieu of using d3.csv . However, I included the d3.csv code (commented out), just in case that could be a cause for my problem.

I'm new to d3 so any pointers or ideas welcome!

Answer 1

Here's an updated fiddle with the dots zooming on the points in the main panel: http://jsfiddle.net/henbox/3uwg92f8/1/

You were very close, I just made 3 small changes:

Firstly, uncommented the code you already had in function brushed() for selecting the dots

Secondly, defined mydots globally (since you were only doing it inside initialize() and it needs to be used beyond this scope). Added this on line 55:

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

And last (and most importantly), I changed the definition for xMap from

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

to

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

When brushing, it's the x scale that gets updated, not the x2