Leaflet With d3fc-label-layout

Question

Trying to use d3fc-label-layout with leaflet but cannot go further because getting

error Uncaught TypeError: updateSelection.merge is not a function

 var map = L.map('map').setView([45.616037, 15.951813], 5);
    mapLink =
        '<a href="http://openstreetmap.org">OpenStreetMap</a>';
    L.tileLayer(
        'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; ' + mapLink + ' Contributors',
            maxZoom: 18,
        }).addTo(map);
    map._initPathRoot()  
    // Add an SVG element to Leaflet’s overlay pane
    var svg = d3.select("#map").select("svg"),
        g = svg.append("g");
    d3.json("data.json", function (geoShape) {
        geoShape.features.forEach(function (d) {
            d.LatLng = new L.LatLng(d.geometry.coordinates[1],
                d.geometry.coordinates[0])
        })
        var labelPadding = 2;

        var textLabel = fc.layoutTextLabel()
            .padding(labelPadding)
            .value(function (d) { return d.properties.name; });

        var strategy = fc.layoutRemoveOverlaps(fc.layoutGreedy());

        // create the layout that positions the labels
        var labels = fc.layoutLabel(strategy)
            .size(function (_, i, g) {
                // measure the label and add the required padding
                var textSize = d3.select(g[i])
                    .select('text')
                    .node()
                    .getBBox();
                return [textSize.width + labelPadding * 2, textSize.height + labelPadding * 2];
            })
            .position(function (d) { return projection(d.geometry.coordinates); })
            .component(textLabel);

        svg.datum(geoShape.features)
           .call(labels);
    })

Any help with using d3fc-label-layout with leaflet?

Answer 1

The problem was, i was using D3 version 3 - this component is designed to work with D3 version 4.

<script src="https://d3js.org/d3.v4.js"></script>