如何在d3.js中將單條作爲3d效果？

-1

如何使用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>

來源

2017-02-17 Sai Rajesh

此鏈接可能會對您有幫助http://bl.ocks.org/camio/5087116 – Gilsha

等軸測投影，（而不是一個真正的3D投影，它有一個解決方案gi在上面的評論中），你需要繪製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+")") 
    ;

，如果你打算做大量的這些，但它只能在畫布元素上，而不是SVG這可能是值得探討http://jdan.github.io/isomer/。

來源

2017-02-17 12:56:49 mgraham

如何在d3.js中將單條作爲3d效果？

回答

相關問題