リーフレット

Question

リーフレットでd3fcラベルレイアウトを使用しようとしているが、

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); 
    }) 

リーフレットでd3fcラベルレイアウトを使用して任意の助けを得るためにさらに行くことができませんか？

Answer 1

問題は、私はD3バージョン3を使用した - このコンポーネントは、D3のバージョンで動作するように設計されている4

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