1

我有一个带有数据地图的地球仪，我想在其中实现一点缩放功能。不缩放到特定国家，只是一个正常的缩放功能。

我应该在哪里寻找它？我是 d3 和数据图的新手。我设法或多或少地对其进行了自定义，但是仍然缺少此缩放功能。

这是代码笔： https ://codepen.io/simii/pen/yZvQmv

还有我的 javascript：

    //basic map config with custom fills, mercator projection

               var series = [
        ["USA",36.2],["GBR",7.4],["CAN",6.2],["DEU",5.7],["FRA", 4.1],["ESP",4.1],["ITA",3.3],["MEX",3.0],["AUS",2.5],["NLD",2.4],
        ["IND",2.1],["BRA",2.0],["GRC",1.4],["AUT",1.2],["ROU",1.2],["SRB",1.0],["COL",0.8],["POL",0.8],["ZAF",0.7],["SWE",0.7],
        ["DNK",0.6],["VEN",0.6],["JPN",0.6],["KOR",0.6],["BEL",0.5],["RUS",0.5],["PRT",0.5]
                            ];

         var dataset = {};
            // We need to colorize every country based on "percent"
            // colors should be uniq for every value.
            // For this purpose we create palette(using min/max series-value)
            var onlyValues = series.map(function(obj){ return obj[1]; });
            var minValue = Math.min.apply(null, onlyValues),
                    maxValue = Math.max.apply(null, onlyValues);
            // create color palette function
            // color can be whatever you wish
            var paletteScale = d3.scale.linear()
                    .domain([minValue,maxValue])
                    .range(["rgb(0,0,0)","rgb(219,219,219)"]);  // color
            // fill dataset in appropriate format
            series.forEach(function(item){ //
                // item example value ["USA", 36.2]
                var iso = item[0],
                        value = item[1];
                dataset[iso] = { percent: value, fillColor: paletteScale(value) };
            });

    var map;
            var globalRotation = [90,-30];

function redraw() {
  d3.select("#world").html('');
  init();
}// redraw
            function init() {

  map = new Datamap({//need global var
                scope: 'world',
                element: document.getElementById('world'),
                projection: 'orthographic',
                projectionConfig: {
                  rotation: globalRotation
                },
                 fills: {defaultFill: 'rgba(30,30,30,0.1)'},
                data: dataset,
                geographyConfig: {
                responsive: true,
                    borderColor: 'rgba(222,222,222,0.2)',
                    highlightBorderWidth: 1,
                    // don't change color on mouse hover
                    highlightFillColor: function(geo) {
                        return geo['fillColor'] || 'rgba(30,30,30,0.5)';
                    },
                    // only change border
                    highlightBorderColor: 'rgba(222,222,222,0.5)',
                    // show desired information in tooltip
                    popupTemplate: function(geo, data) {
                        // don't show tooltip if country don't present in dataset
                        if (!data) { return ; }
                        // tooltip content
                        return ['',
                            '<div style="opacity:0.7;" class="hoverinfo">% of visitors in ' + geo.properties.name,
                                ': ' + data.percent,
                                ''].join('');        

                    }
                }
            });


            //draw a legend for this map
            map.legend();

              map.graticule();

  var drag = d3.behavior.drag().on('drag', function() {
    var dx = d3.event.dx;
            var dy = d3.event.dy;

            // var rotation = livemapScope.rotation;
            var rotation = map.projection.rotate();
            var radius = map.projection.scale();
            var scale = d3.scale.linear()
              .domain([-1 * radius, radius])
              .range([-90, 90]);
            var degX = scale(dx);
            var degY = scale(dy);
            rotation[0] += degX;
            rotation[1] -= degY;
            if (rotation[1] > 90) rotation[1] = 90;
            if (rotation[1] < -90) rotation[1] = -90;

            if (rotation[0] >= 180) rotation[0] -= 360;
    globalRotation = rotation;
    redraw();
  })

 d3.select("#world").select("svg").call(drag);

}// init

redraw();
4

0 回答 0