D3防止路径包裹

Question

我在这里使用D3构建地图：http://generationone.kera.org/map/

我希望找到一些方法来防止在画布上缠绕（特别是在顶部）。我在这里尝试了几个不同的线程，关于翻译路径和类似的运气很少......

    var origins = (function() {
    var origins = null;
   jQuery.ajax({
        'async': false,
        'global': false,
        'url': 'http://generationone.kera.org/map/json/labels.json',
        'dataType': "json",
        'success': function(data) {
            origins = data;
        }
    });
    return origins;
})();
var color = d3.scale.quantize().range(['rgb(254,237,222)', 'rgb(253,208,162)',
    'rgb(253,174,107)', 'rgb(253,141,60)', 'rgb(230,85,13)',
    'rgb(166,54,3)'
]).domain([1, 6]);
var legend = d3.select('#legend').append('ul').attr('class', 'list-inline');
var keys = legend.selectAll('li.key').data(color.range());
keys.enter().append('li').attr('class', 'key').style('border-top-color', String)
    .text(function(d) {
        var r = color.invertExtent(d);
        /* return formats.percent(r[0]); */
        console.log(d);
        if (d == "rgb(254,237,222)") {
            return "-...";
        } else if (d == "rgb(166,54,3)") {
            return "...+";
        } else {
            return ".....";
        }
    });
var tooltip = d3.select("body").append("div").style("position", "absolute").style(
    "z-index", "10").style("visibility", "hidden").text("EMPTY");
var currentWidth =jQuery('#map').width();
var width = 938;
var height = 620;
var projection = d3.geo.mercator() /* albers, mercator */ .scale(175).translate(
    [width / 2, height / 1.41]);
var path = d3.geo.path().pointRadius(2).projection(projection);
var svg = d3.select("#map").append("svg").attr("preserveAspectRatio",
    "xMidYMid").attr("viewBox", "0 0 " + width + " " + height).attr("width",
    currentWidth).attr("height", currentWidth * height / width);

function loaded(error, countries, labels) {
    svg.append("g").attr("class", "countries").selectAll("path").data(
        topojson.feature(countries, countries.objects.countries).features
    ).enter().append("path").attr("class", function(d) {
        return d.properties.name;
    }).attr("d", path);
    svg.append("g").attr("class", "labels").selectAll("path").data(topojson
        .feature(labels, labels.objects.labels).features).enter().append(
        "path").attr("d", path);
    var lineFunction = d3.svg.line().x(function(d) {
        return d.x;
    }).y(function(d) {
        return d.y;
    }).interpolate("linear");
    var i = origins.features.length - 1;
    while (i > -1) {
        var route = svg.append("path").datum({
                type: "LineString",
                coordinates: [origins.features[i].geometry.coordinates, [-
                    98.22359954643433, 30.627013239728797
                ]]
            }).attr("class", "route").attr("d", path).attr("data-amount",
                origins.features[i].properties.amount).attr("data-name",
                origins.features[i].properties.name)

            .style("stroke", function(d) {
                var rank = origins.features[i].properties.rank;
                if (rank) {
                    return color(rank);
                } else {
                    return "#FEEBE2";
                }
            }).on("mouseover", function() {
                d3.select(this).classed("active", true) 
                var sel_country = d3.select(this).attr("data-name");
                var sel_amount = d3.select(this).attr("data-amount");
                console.log(sel_country+sel_amount);
                jQuery("." + sel_country).each(function(index) {
                   jQuery(this).css("fill", "#ffffff");
                });

                setTimeout(function() {
                    // create the notification

                    if (jQuery(".ns-box").length == 0) {
                        var notification = new NotificationFx({
                            message: sel_country + " " +
                                sel_amount,
                            layout: 'attached',
                            effect: 'bouncyflip',
                            type: 'notice', // notice, warning or error
                            onClose: function() {}
                        });
                        // show the notification
                        notification.show();
                    } else {
                       jQuery(".ns-box-inner").text(sel_country +
                            " " + sel_amount);
                    }
                    /* end if */
                }, 100);

            }).on("mouseout", function() {
                d3.select(this).classed("active", false)
                var sel_country = d3.select(this).attr("data-name");
               jQuery("." + sel_country).css("fill", "#B0D0AB");
            }).attr("stroke-dasharray", 2000).attr("stroke-dashoffset",
                2000).transition().duration(6000).ease("linear").attr(
                "stroke-dashoffset", 0);
        i--;
    }
}
queue().defer(d3.json, "http://generationone.kera.org/map/json/countries.topo.json").defer(d3.json,
    "http://generationone.kera.org/map/json/labels.topo.json").defer(d3.json, "http://generationone.kera.org/map/json/labels.json").await(
    loaded);
jQuery(window).resize(function() {
    currentWidth =jQuery("#map").width();
    svg.attr("width", currentWidth);
    svg.attr("height", currentWidth * height / width);
});