我正在使用d3-3d插件来绘制3D条形图,但我希望在保持旋转的同时添加平移和缩放功能。只是简单地添加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.select('svg')
.call(d3.drag()
.on('drag', dragged)
.on('start', dragStart)
.on('end', dragEnd))
.append('g');
var color = d3.scaleOrdinal(d3.schemeCategory20);
var cubesGroup = svg.append('g').attr('class', 'cubes');
var mx, my, mouseX, mouseY;
var cubes3D = d3._3d()
.shape('CUBE')
.x(function(d){ return d.x; })
.y(function(d){ return d.y; })
.z(function(d){ return d.z; })
.rotateY( startAngle)
.rotateX(-startAngle)
.origin(origin)
.scale(scale);
var zoom = d3.zoom()
.scaleExtent([1, 40])
.on("zoom", zoomed);
cubesGroup.call(zoom);
function zoomed() {
cubesGroup.attr("transform", d3.event.transform);
}
function processData(data, tt){
/* --------- CUBES ---------*/
var cubes = cubesGroup.selectAll('g.cube')
.data(data, function(d){ return d.id });
var ce = cubes
.enter()
.append('g')
.attr('class', 'cube')
.attr('fill', function(d){ return color(d.id); })
.attr('stroke', function(d){
return d3.color(color(d.id)).darker(2);
})
.merge(cubes)
.sort(cubes3D.sort);
cubes.exit().remove();
/* --------- FACES ---------*/
var faces = cubes.merge(ce)
.selectAll('path.face')
.data(function(d){ return d.faces; },
function(d){ return d.face; }
);
faces.enter()
.append('path')
.attr('class', 'face')
.attr('fill-opacity', 0.95)
.classed('_3d', true)
.merge(faces)
.transition().duration(tt)
.attr('d', cubes3D.draw);
faces.exit().remove();
/* --------- TEXT ---------*/
var texts = cubes.merge(ce)
.selectAll('text.text').data(function(d){
var _t = d.faces.filter(function(d){
return d.face === 'top';
});
return [{height: d.height, centroid: _t[0].centroid}];
});
texts.enter()
.append('text')
.attr('class', 'text')
.attr('dy', '-.7em')
.attr('text-anchor', 'middle')
.attr('font-family', 'sans-serif')
.attr('font-weight', 'bolder')
.attr('x', function(d){
return origin[0] + scale * d.centroid.x
})
.attr('y', function(d){
return origin[1] + scale * d.centroid.y
})
.classed('_3d', true)
.merge(texts)
.transition().duration(tt)
.attr('fill', 'black')
.attr('stroke', 'none')
.attr('x', function(d){
return origin[0] + scale * d.centroid.x
})
.attr('y', function(d){
return origin[1] + scale * d.centroid.y
})
.tween('text', function(d){
var that = d3.select(this);
var i = d3.interpolateNumber(+that.text(), Math.abs(d.height));
return function(t){
that.text(i(t).toFixed(1));
};
});
texts.exit().remove();
/* --------- SORT TEXT & FACES ---------*/
ce.selectAll('._3d').sort(d3._3d().sort);
}
function init(){
cubesData = [];
var cnt = 0;
for(var z = -j/2; z <= j/2; z = z + 5){
for(var x = -j; x <= j; x = x + 5){
var h = d3.randomUniform(-2, -7)();
var _cube = makeCube(h, x, z);
_cube.id = 'cube_' + cnt++;
_cube.height = h;
cubesData.push(_cube);
}
}
processData(cubes3D(cubesData), 1000);
}
function dragStart(){
mx = d3.event.x;
my = d3.event.y;
}
function dragged(){
mouseX = mouseX || 0;
mouseY = mouseY || 0;
beta = (d3.event.x - mx + mouseX) * Math.PI / 230 ;
alpha = (d3.event.y - my + mouseY) * Math.PI / 230 * (-1);
processData(cubes3D.rotateY(beta + startAngle)
.rotateX(alpha - startAngle)(cubesData), 0);
}
function dragEnd(){
mouseX = d3.event.x - mx + mouseX;
mouseY = d3.event.y - my + mouseY;
}
function makeCube(h, x, z){
return [
{x: x - 1, y: h, z: z + 1}, // FRONT TOP LEFT
{x: x - 1, y: 0, z: z + 1}, // FRONT BOTTOM LEFT
{x: x + 1, y: 0, z: z + 1}, // FRONT BOTTOM RIGHT
{x: x + 1, y: h, z: z + 1}, // FRONT TOP RIGHT
{x: x - 1, y: h, z: z - 1}, // BACK TOP LEFT
{x: x - 1, y: 0, z: z - 1}, // BACK BOTTOM LEFT
{x: x + 1, y: 0, z: z - 1}, // BACK BOTTOM RIGHT
{x: x + 1, y: h, z: z - 1}, // BACK TOP RIGHT
];
}
d3.selectAll('button').on('click', init);
init();
button {
position: absolute;
right: 10px;
top: 10px;
}
<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/d3-3d/build/d3-3d.min.js"></script>
<body>
<svg width="200" height="175"></svg>
</body>
(1) 使用
Ctrl+拖动
可以平移原点(在移动设备上使用两个手指拖动)。(2) 使用
拖动
可以旋转(在移动设备上使用一个手指拖动)。(3) 使用
缩放
可以调整比例(在移动设备上使用两个手指捏合)。如何停止事件传播并只处理这些特定事件?
编辑:似乎 条形图示例 有可以设置的
scale()
和 origin()
,但我更喜欢使用 transforms
来提高更新的速度和效率(而不是重新绘制)。