2017-03-16 66 views
1

尝试使用d3fc标签布局具有单张,但不能走得更远,因为越来越单张随着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标签布局与小叶任何帮助吗?

回答

1

的问题,我用D3版本3 - 组件设计与D3版工作4

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