Question

尝试将d3fc-label-layout与传单一起使用，但因为获取

而无法继续使用

错误未捕获TypeError：updateSelection.merge不是函数

 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-label-layout的任何帮助吗？

Answer 1

问题是，我使用的是D3版本3 - 此组件适用于D3版本4。

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

传单与d3fc标签布局

1 个答案: