个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-29 23:16:23 24 4
gpt4 key购买 nike

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

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

这是我使用的代码

<!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>

这里用两张图片来说明问题。

第一张图片确实清楚地显示了我的酒吧及其值(value)。 Highlighted bar is displayed

稍微旋转以获得第二张图片，但它会“消失”(然而我的印象是它并没有消失，只是达到了一个非常小的高度值)Highlighted bar is not visible

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

最佳答案

感谢@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;
        }

关于javascript - 使用 D3.js 的 3D 条形图的透视问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52649382/

24 4 0
文章推荐： php - 帖子存档不显示年份和月份
文章推荐： php - 将多页 php 表单转换为一页表单
文章推荐： PHP mysql jquery 分页修改
文章推荐： android - 决定在 firebase 中创建新项目或更新旧项目
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com