D3.js SVG on OpenLayers3 interactive map

Question

I am trying to figure out how hard it could be to integrate D3.js with OpenLayers 3 to create a beautiful interactive map.

I am looking at Mike's example, D3 + Leaflet: http://bost.ocks.org/mike/leaflet/

And at Mike`s example d3.geo.path + Canvas where you then lose all the interactivity and the css style support of SVG.

And on the OpenLayers-3 example site, there is this interactive map, where it integrates Mike's example of d3.geo.path + Canvas with OpenLayers to create an interactive map:

So I am wondering, what is missing in OpenLayers3 to allow the creation of something similar to the D3 + Leaflet example, or is it even possible considering OL3 design?

Answer 1

you can't use the css approch used by leaflet on openlayers, the D3 + openlayer basically draw the data using d3 on a canvas wich is used as an imagelayer.

You need to use the openlayer approch : layers + style , you can have similar performance with openlayers "imagevector" layers.

i edited your jsfiddle with style + imagevector:

http://jsfiddle.net/6r8rat8n/5/

var vector = new ol.layer.Image({
    source: new ol.source.ImageVector({
        source: vectorSource,
        style: new ol.style.Style({
            fill: new ol.style.Stroke({
                color: '#efefef',
                width: 1
            }),
            stroke: new ol.style.Stroke({
                color: '#fff',
                width: 1
            })
        })
    })
});


// select interaction working on "mousemove"
var selectMouseMove = new ol.interaction.Select({
  condition: ol.events.condition.mouseMove,
    style: new ol.style.Style({
                    fill: new ol.style.Stroke({
                        color: 'red',
                        width: 1
                    }),
                    stroke: new ol.style.Stroke({
                        color: '#fff',
                        width: 1
                    })
                })
});

Answer 2

It is possible with openlayers.v4 and d3.v4. Check out these gist and fiddle.

https://gist.github.com/grabantot/64ff2daafdb85c7ffd187fe391755494/ https://jsfiddle.net/grabantot/3gq5wbqz/

Call init_ol_d3(map), it returns you a function for scaling between longlat and screen then you can use d3 and css as usual:

drawRoute = d3.line()
    .x(function(lonlat) { return s(lonlat)[0] })
    .y(function(lonlat) { return s(lonlat)[1] })

Hover over the line and it changes color as set in css. Sorry for poor explanations, it's the end of my working day. See the gist for more info. Rotation (alt+shift+mouse) doesn't work though (wasn't needed for me yet). Maybe someone will make a fix...