D3.js SVG on OpenLayers3 interactive map

Question

I'm trying to understand how difficult it was 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 in Mike’s example d3.geo.path + Canvas, where you lose all the interactivity and CSS style support in SVG.

And the OpenLayers-3 example site has this interactive map in which it integrates the Mike d3.geo.path+ Canvas example with OpenLayers to create an interactive map:

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

Answer 1

you cannot use the CSS approach used by booklets in openlayers, D3 + openlayer basically retrieves data using d3 on the canvas, which is used as an image.

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

i edited your jsfiddle in the style of + 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

This is possible with openlayers.v4 and d3.v4. Check out these essence and fiddle.

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

Calling init_ol_d3(map), it returns you the scaling function 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] })

, css. , . . . (alt + shift + mouse) , ( ). , - ...