Javascript 使用d3-3d和pan&；在保持旋转的同时缩放

我正在使用来绘制三维条形图，但我想在保持旋转的同时添加平移和缩放功能。仅仅添加

d3.zoom（）

似乎与

d3.drag（）

行为相冲突-哪种行为优先似乎是随机的，并增加了很多“抖动”

var origin=[100,85]，scale=5，j=10，cubesData=[]；
var alpha=0，beta=0，startAngle=Math.PI/6；
var svg=d3。选择（'svg'）
.call（d3.drag（）
.on（'拖动'，拖动）
.on（'start'，dragStart）
.on（'end'，dragEnd））
.append（'g'）；
var color=d3.scaleOrdinal（d3.schemeCategory 20）；
var cubesGroup=svg.append（'g'）.attr（'class'，'cubes'）；
var mx，my，mouseX，mouseY；
var cubes3D=d3._3d（）
.shape（'立方体'）
.x（函数（d）{返回d.x；}）
.y（函数（d）{返回d.y；}）
.z（函数（d）{返回d.z；}）
rotateY先生（startAngle）
.rotateX（-startAngle）
.原产地（原产地）
.比例尺（比例尺）；
var zoom=d3.zoom（）
.scaleExtent（[1,40]）
。打开（“缩放”，缩放）；
cubesGroup.call（缩放）；
函数缩放（）{
attr（“transform”，d3.event.transform）；
}   
函数processData（数据，tt）{
/*------立方体---------*/
var cubes=cubesGroup.selectAll（'g.cube'））
.data（数据，函数（d）{返回d.id}）；
var ce=立方体
.输入（）
.append（'g'）
.attr（'class'，'cube'）
.attr（'fill'，函数（d）{返回颜色（d.id）；}）
.attr（'stroke'，函数（d）{
返回d3.颜色（颜色（d.id））.较深（2）；
})
.合并（多维数据集）
.sort（立方体3d.sort）；
cubes.exit（）.remove（）；
/*------面孔---------*/
var faces=cubes.merge（ce）
.selectAll（'path.face'）
.data（函数（d）{返回d.faces；}，
函数（d）{返回d.face；}
);
faces.enter（）
.append（'路径'）
.attr（'class'，'face'）
.attr（'fill-opacity'，0.95）
.已分类（“3d”，真）
.合并（面）
.transition（）.duration（tt）
.attr（'d'，立方体3d.draw）；
faces.exit（）.remove（）；
/*------正文---------*/
var text=cubes.merge（ce）
.selectAll（'text.text'）。数据（函数（d）{
var\u t=d.faces.filter（函数（d）{
返回d.face==='top'；
});
返回[{height:d.height，centroid:_t[0]。centroid}]；
});
文本。输入（）
.append（'文本'）
.attr（'类'，'文本'）
.attr（'dy'，'-.7em'））
.attr（'text-anchor'，'middle'）
.attr（'font-family'，'sans serif'）
.attr（'font-weight'，'bold'）
.attr（'x'，函数（d）{
返回原点[0]+刻度*d.centroid.x
})
.attr（'y'，函数（d）{
返回原点[1]+刻度*d.centroid.y
})
.已分类（“3d”，真）
.合并（文本）
.transition（）.duration（tt）
.attr（'填充'，'黑色'）
.attr（'笔划'，'无'）
.attr（'x'，函数（d）{
返回原点[0]+刻度*d.centroid.x
})
.attr（'y'，函数（d）{
返回原点[1]+刻度*d.centroid.y
})
.tween（'text'，函数（d）{
var=d3。选择（此）；
var i=d3.interpolationEnumber（+that.text（），Math.abs（d.height））；
返回函数（t）{
文本（i（t）.toFixed（1））；
};
});
text.exit（）.remove（）；
/*------对文本和面进行排序---------*/
ce.选择所有（'.'U 3d'）.sort（d3.'U 3d（）.sort）；
}
函数init（）{
立方数据=[]；
var-cnt=0；
对于（var z=-j/2；z您可以使用
d3.event.sourceEvent
获取事件的类型。在您共享的代码中，在空白处拖动将旋转，在条上拖动将移动

使用
d3.event.sourceEvent
可以检查是否按下了
ctrl
键并相应地移动/旋转。您甚至不需要为
svg
使用
拖动
功能。只需使用
缩放
功能即可处理

这是小提琴：


var origin=[100,85]，
比例=5，
j=10，
立方数据=[]；
varα=0，
β=0，
startAngle=Math.PI/6；
var zoom=d3.zoom（）
.scaleExtent（[1,40]）
.on（“缩放”，缩放）
.on（'start'，zoomStart）
.在（'end'，zoomEnd）上；
var svg=d3。选择（'svg'）。调用（缩放）
.append（'g'）；
var color=d3.scaleOrdinal（d3.schemeCategory 20）；
var cubesGroup=svg.append（'g'）.attr（'class'，'cubes'）.attr（'transform'，'translate（0,0）scale（1））；
var mx，my，mouseX，mouseY；
var cubes3D=d3._3d（）
.shape（'立方体'）
.x（功能（d）{
返回d.x；
})
.y（功能（d）{
返回d.y；
})
.z（功能（d）{
返回d.z；
})
rotateY先生（startAngle）
.rotateX（-startAngle）
.原产地（原产地）
.比例尺（比例尺）；
函数zoomStart（）{
mx=d3.event.sourceEvent.x；
my=d3.event.sourceEvent.y；
if（d3.event.sourceEvent！==null&&d3.event.sourceEvent.type=='mousemove'&&d3.event.sourceEvent.ctrlKey==true）{
attr（“transform”，d3.event.transform）；
}
}
函数zoomEnd（）{
if（d3.event.sourceEvent==null）返回；
mouseX=d3.event.sourceEvent.x-mx+mouseX
mouseY=d3.event.sourceEvent.y-my+mouseY
}
函数缩放（d）{
if（d3.event.sourceEvent==null）返回；
if（d3.event.sourceEvent！==null&&d3.event.sourceEvent.type==wheel）{
attr（“transform”，“scale”（+d3.event.transform['k']+”）；
}else if（d3.event.sourceEvent！==null&&d3.event.sourceEvent.type=='mousemove'&&d3.event.sourceEvent.ctrlKey==true）{
cubesGroup.attr（“transform”、“translate”（+d3.event.transform['x']+”、“+d3.event.transform['y']+”）比例（+d3.event.transform['k']+”）；
}else if（d3.event.sourceEvent！==null&&d3.event.sourceEvent.type=='mousemove'&&d3.event.sourceEvent.ctrlKey==false）{
mouseX=mouseX | | 0；
mouseY=mouseY | | 0；
beta=（d3.event.sourceEvent.x-mx+mouseX）*Math.PI/230；
alpha=（d3.event.sourceEvent.y-my+mouseY）*