Question

我有以下代码用于创建单个矩形。

如何使用d3.js

为矩形制作3d效果

我需要输出如下图所示

我的代码是

<!DOCTYPE html>
<html>
<head>
  <title>rect</title>
  <script src="http://d3js.org/d3.v3.js"></script>
</head>
<body>
<div id="bar_div"></div>
<script>
bar();
function bar(){
  var bar_column =d3.select("#bar_div")

  var bar_rect= bar_column.append('svg')
                          .attr('class','decile-column')
                          .attr('width','200px')
                          .attr('height','30px')
  bar_rect.append('rect')
          .attr('width',160)
          .attr('height','20px')
          .attr('y', '4')
          .attr('fill',"skyblue")
}
</script>
</body>
</html>

Answer 1

对于等距投影，（而不是在上面的评论中给出解决方案的真实3D投影），您需要绘制3个矩形，其中2个剪切变换45度（或任何角度你喜欢）并相应地抵消。

http://jsfiddle.net/d7aos9og/2/

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+")")
  ;

如果你打算做很多这些，可能值得研究http://jdan.github.io/isomer/，虽然它只适用于canvas元素而不是svg。

如何在d3.js中将单个条形作为3d效果？

1 个答案: