Javascript 如何在d3.js中制作单条3d效果？

我有以下创建单个矩形的代码

如何使用d3.js制作矩形的3d效果

我需要像下面的图片输出

我的代码是

直肠
bar（）；
功能条（）{
var bar_column=d3。选择（“bar_div”）
var bar\u rect=bar\u column.append（'svg'）
.attr（'class'，'decile-column'）
.attr（'width'，'200px'）
.attr（'height'，'30px'）
bar_rect.append（'rect'）
.attr（'宽度'，160）
.attr（'height'，'20px'）
.attr（'y'，'4'）
.attr（'填充'，“天蓝色”）
}

对于等轴测投影（而不是上面注释中给出了解决方案的真实3D投影），您需要绘制3个矩形，其中2个剪切变换45度（或任意角度），并相应偏移

如果您打算做很多这样的工作，那么可能值得一看，尽管它只适用于画布元素而不是svg。

此链接可能会有所帮助

var svg = d3.select('svg');

var rect3d = svg.append('g')
    .attr("transform", "translate (50,50)")
;

var rh = 20, rw = 200, ang=45;

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

  rect3d.append("rect")
    .attr("class", "top")
  .attr("x", 0)
  .attr("y", 0)
  .attr("width", rw)
  .attr("height", rh/2)
  .attr ("transform", "translate ("+(-rh/2)+","+(-rh/2)+") skewX("+ang+")")
  ;

  rect3d.append("rect")
    .attr("class", "side")
   .attr("x", 0)
  .attr("y", 0)
  .attr("width", rh/2)
  .attr("height", rh)
  .attr ("transform", "translate ("+(-rh/2)+","+(-rh/2)+") skewY("+ang+")")
  ;