This D3 + OpenLayers example mirrors as closely as possible Mike Bostock’s D3 + Leaflet example. See his example for an explanation.
Primary differences:
OpenLayers uses Mercator (EPSG:4326) by default, which appears distorted (for example). It’s easy to switch to “Spherical Mercator” (EPSG:900913), but then you need to be careful to convert lon/lat to the OpenLayers default x/y coordinates in meters.
As in this example, the code below uses an OpenLayers Vector Layer in place of Leaflet’s overlay pane. Whereas Leaflet requires repositioning only on zoom, OpenLayers needs repositioning for both zoom and pan. This makes it easier to size the SVG with OpenLayers – it need only fit the viewport, as long as you’re willing to wait for clipped features to be drawn after pan events. For example, pan this map; notice that Alaska won’t be drawn until you raise your mouse.