如何在d3.js中旋转3D立方体角度 修正现有代码朝向相反的问题

问题解决方案 #

你代码里立方体朝向相反的问题核心是顶面、侧面的skew变换参数符号错误，调整角度符号即可修正朝向；如果要实现示例里的多列立方体效果，加一层循环给每个立方体设置X轴偏移量即可。

修改后的完整可运行代码如下：

<style>
    * {
        margin: 30;
        padding: 30;
        border: 0;
    }

    body {
        background: white;
    }

    .forward {
        fill: #ee5252;
    }

    .top {
        fill: #b43c3c;
    }

    .side {
        fill: #b23b3b;
    }
</style>
<script src="https://d3js.org/d3.v3.js"></script>
<svg width="500" height="300">

</svg>

<script>
    var svg = d3.select('svg');
    var rh = 130, rw = 20, ang = 45;
    // 可自定义立方体数量
    var cubeCount = 5;
    // 两个立方体之间的X轴偏移距离
    var offsetX = 40;

    for(var i=0; i<cubeCount; i++){
        var rect3d = svg.append('g')
            .attr("transform", `translate(${15 + i*offsetX},15)`);

        rect3d.append("rect")
            .attr("class", "forward")
            .attr("x", 0)
            .attr("y", 0)
            .attr("width", rw)
            .attr("height", rh);

        // 把skewX改为-45修正顶面朝向
        rect3d.append("rect")
            .attr("class", "top")
            .attr("x", 0)
            .attr("y", 0)
            .attr("width", rw)
            .attr("height", rh / 2)
            .attr("transform", "translate (0," + (-rh / 2) + ") skewX(-45)");

        // 把skewY改为-ang，同时调整translate参数修正侧面朝向
        rect3d.append("rect")
            .attr("class", "side")
            .attr("x", 0)
            .attr("y", 0)
            .attr("width", rh/2)
            .attr("height", rh)
            .attr ("transform", "translate ("+rw+","+(-rh/2)+") skewY("+-ang+")");
    }
</script>

你提到的示例效果图如下：

d3.js定制图表学习建议 #

如果要系统学习用d3.js实现符合需求的自定义图表，可以按这个路径学习：

• 先掌握SVG基础语法和变换规则，重点搞懂translate、rotate、skew、scale几个核心变换的作用逻辑
• 再逐一学习d3的核心模块：选择集操作、数据绑定、比例尺、坐标轴、过渡动画等
• 做3D类自定义图表前，可以先了解等轴测投影的基础转换规则，能更快调整出符合预期的效果

内容的提问来源于stack exchange，提问作者Subham Subhasis Patra