Javascript 在d3.js中将二维形状转换为三维形状，并根据角度中的值调整高度

我正在使用d3.js v6创建以下2D图表表示的3D图形。此圆中有多个正方形，每个正方形都已根据该值指定了颜色。值越大，正方形越暗

现在我想将其转换为3D形状，当值变高时，只有特定正方形的高度增加，因此结果与下图类似。底部为圆形，但每个值的高度将根据该值升高

---

我也在努力做到这一点，如果有人能帮助我的话。以下是

希望此脚本及其逻辑能够帮助您：

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);
}

d3.selectAll('button').on('click', init);

init();

var origin=[480300]，scale=20，j=10，cubesData=[]，alpha=0，beta=0，startAngle=Math.PI/6；
var svg=d3.select（'svg'）。调用（d3.drag（）.on（'drag'，drag.）。on（'start'，dragStart）。on（'end'，dragEnd））。追加（'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）
.原产地（原产地）
.比例尺（比例尺）；
函数processData（数据，tt）{
/*------立方体---------*/
var cubes=cubesGroup.selectAll（'g.cube'）.data（数据，函数（d）{return d.id}）；
var ce=立方体
.输入（）
.append（'g'）
.attr（'class'，'cube'）
.attr（'fill'，函数（d）{返回颜色（d.id）；}）
.attr（'stroke'，函数（d）{返回d3.color（color（d.id））.darker（2）；}）
.合并（多维数据集）
.sort（立方体3d.sort）；
cubes.exit（）.remove（）；
/*------面孔---------*/
var faces=cubes.merge（ce）.selectAll（'path.face'）.data（函数（d）{return d.faces；}，函数（d）{return d.faces；}）；
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'）。data（函数（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]+scale*d.centroid.x}）
.attr（'y'，函数（d）{返回原点[1]+scale*d.centroid.y}）
.已分类（“3d”，真）
.合并（文本）
.transition（）.duration（tt）
.attr（'填充'，'黑色'）
.attr（'笔划'，'无'）
.attr（'x'，函数（d）{返回原点[0]+scale*d.centroid.x}）
.attr（'y'，函数（d）{返回原点[1]+scale*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 v6兼容？我尝试使用最新版本的d3.js，但它不起作用某些函数名的更改可能会对您有所帮助。请参阅文档此代码是未分配的剪切/粘贴自。