Question

我目前正在使用D3.js构建3D条形图，并基于可用的代码here

我遇到的问题是，当将所有条形彼此靠近并旋转我的条形图时，透视图/投影图/视图会有些奇怪，并使某些值在某些角度完全平坦。现在我知道这可能只是一个透视问题，但是我非常想纠正它。

这是我使用的代码

<!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="960" height="500"></svg>
<style type="text/css">
button {
    position: absolute;
    right: 10px;
    top: 10px;
}
</style>
<button>update</button>
<script>
    var origin = [480, 300], scale = 20, j = 10, cubesData = [], 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);

    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 + 2){
            for(var x = -j; x <= j; x = x + 2){
            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();
</script>
</body>

这是带有两个图像的问题的说明。

第一张图片确实清楚显示了我的酒吧及其价值。

稍微旋转以获得第二张图像就会使其“消失”（但是，我的印象是它并没有消失，只是达到了很小的高度值）

有人知道这是哪里来的吗？

Answer 1

由于@ rioV8的评论，我解决了该问题，这表明SVG在这里还不够。

因此，我使用了Three.js。这是我的函数makeCube

function makeCube(h, x, length_x, z, length_z){


            h = normalise_height(h)
            h = -h //for drawing purposes

            x = x
            z = z


            var geometry = new THREE.CubeGeometry(length_x, h, length_z);
            var material = new THREE.MeshBasicMaterial( { color: 0x00ff00ff, wireframe: false } );
            var mesh = new THREE.Mesh(geometry, material);


            var eGeometry = new THREE.Geometry();
            var positions = [];
            positions.push([0, 0, 0]);
            positions.push([length_x, 0, 0]);
            positions.push([length_x, 0, length_z]);
            positions.push([0, 0, length_z]);
            positions.push([0, 0, 0]);
            positions.push([0, h, 0]);
            positions.push([length_x, h, 0]);
            positions.push([length_x, h, length_z]);
            positions.push([0, h, length_z]);
            positions.push([0, h, 0]);
            positions.push([0, h, length_z]);
            positions.push([0, 0, length_z]);
            positions.push([0, h, length_z]);
            positions.push([length_x, h, length_z]);
            positions.push([length_x, 0, length_z]);
            positions.push([length_x, h, length_z]);

            positions.push([length_x, h, 0]);
            positions.push([length_x, 0, 0]);

            for(i = 0; i < positions.length; i++)
            {
                //console.log(positions[i])
                eGeometry.vertices.push(new THREE.Vector3(positions[i][0]-length_x/2.0,
                                                          positions[i][1]-h/2.0,
                                                          positions[i][2]-length_z/2.0));
            }

            length_x -= epsilon;
            length_z -= epsilon;

            var eMaterial = new THREE.LineBasicMaterial( { color: 0x0000000, linewidth: 1 } );
            var edges = new THREE.Line( eGeometry , eMaterial );
            mesh.add( edges );

            mesh.position.set(x+length_x/2.0, h/2.0, z+length_z/2.0);
            parentObject.add(mesh);

            return mesh;
        }

Answer 2

d3-3d使用错误的坐标对多维数据集进行排序。将底面形心放入排序功能将对其进行修复。

cubes3D.sort = function(a, b){
    var _a = a.faces[5].centroid.z, _b = b.faces[5].centroid.z;
    return _a < _b ? -1 : _a > _b ? 1 : _a >= _b ? 0 : NaN;
};

使用D3.js的3D条形图的透视问题

2 个答案: