Javascript 使用光标拖动，使d3.js datamap旋转

我是用

我喜欢它的效果，但我希望当你用光标拖动它时，我能让它旋转，这样你就能看到所有的大陆。喜欢这些例子和例子

以下是我的代码片段：

//带有自定义填充、墨卡托投影的基本地图配置
变量系列=[
[“美国”，36.2]，“GBR”，7.4]，“CAN”，6.2]，“DEU”，5.7]，“FRA”，4.1]，“ESP”，4.1]，“ITA”，3.3]，“MEX”，3.0]，“澳大利亚”，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]
];
变量数据集={}；
//我们需要根据“百分比”给每个国家着色
//每个值的颜色都应为uniq。
//为此，我们创建调色板（使用最小/最大系列值）
var onlyValues=series.map（函数（obj）{return obj[1]；}）；
var minValue=Math.min.apply（null，仅限值），
maxValue=Math.max.apply（null，仅限值）；
//创建调色板功能
//颜色可以是你想要的任何颜色
var paletescale=d3.scale.linear（）
.domain（[minValue，maxValue]）
.范围（[“rgb（0,0,0）”，“rgb（219）”）；//颜色
//以适当的格式填写数据集
series.forEach（函数（项）{//
//项目示例值[“美国”，36.2]
var iso=项目[0]，
价值=项目[1]；
数据集[iso]={百分比：值，填充颜色：调色板（值）}；
});
var-map=新数据映射({
范围：“世界”，
元素：document.getElementById（'world'），
投影：'正交'，
项目配置：{
轮换：[90，-30]
},
填充：{defaultFill:'rgba（30,30,30,0.1）}，
数据：数据集，
地理图形配置：{
边框颜色：“rgba（22222,0.2）”，
highlightBorderWidth:1，
//鼠标悬停时不更改颜色
highlightFillColor:函数（地理位置）{
返回geo['fillColor']| |'rgba（30,30,30,0.5）'；
},
//只改变边界
highlightBorderColor:“rgba（22222,0.5）”，
//在工具提示中显示所需信息
popupTemplate：功能（地理位置、数据）{
//如果国家/地区不在数据集中，则不显示工具提示
如果（！data）{return；}
//工具提示内容
返回[“”，
“+geo.properties.name”中的访问者的百分比，
“：”+data.percent，
''）。加入（''）；
}
}
});
//为此地图绘制图例
map.legend（）；
分划图（）

var-livemap；
scope.rotation=[97，-30]；
函数重画（）{
d3.选择（“#地图包装器”）.html（“”）；
init（）；
}//重画
函数init（）{
livemap=新数据映射（{…}）
var drag=d3.behavior.drag（）.on（'drag'，function（））{
var dx=d3.event.dx；
var dy=d3.event.dy；
var rotation=livemap.projection.rotate（）；
var radius=livemap.projection.scale（）；
var scale=d3.scale.linear（）.domain（[-1*半径，半径]）.range（[-90，90]）；
var degX=标度（dx）；
var degY=标度（dy）；
旋转[0]+=degX；
旋转[1]=degY；
如果（旋转[1]>90）旋转[1]=90；
如果（旋转[1]<-90）旋转[1]=-90；
如果（旋转[0]>=180）旋转[0]=360；
scope.rotation=旋转；
重画（）；
})
d3.选择（“地图包装器”）。选择（“svg”）。调用（拖动）；
}//初始化
谢谢您的回答！我已经等了一年多了，哈哈。。不过，我在将此代码整合到我的代码中时遇到了一些问题，您介意将我的代码片段复制粘贴到您的答案中，并将代码添加到javascript中吗？啊，非常感谢！我将在github上对代码发出拉取请求，开发人员应该真的结合此功能。@optimus_max除了可以拖动之外，还有什么方法可以自动旋转地图吗？我曾尝试根据您的代码执行此操作，但未成功。
var livemap;
scope.rotation = [97, -30];

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


function init() {
  livemap = new Datamap({...})

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

    var rotation = livemap.projection.rotate();
    var radius = livemap.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;
    scope.rotation = rotation;
    redraw();
  })

 d3.select("#map-wrapper").select("svg").call(drag);

}// init