Как сделать одиночный бар как 3d-эффект в d3.js?

-1

У меня есть следующий код для создания одного прямоугольника.Как сделать одиночный бар как 3d-эффект в d3.js?

Как сделать 3D-эффект для прямоугольника с помощью d3.js

мне нужен выход, как следующая картина

Мой код

<!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

Для изометрического проекции (а не истинной трехмерной проекции, которая имеет решение 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+")") 
    ;

Это может быть стоит посмотреть в http://jdan.github.io/isomer/, если вы собираетесь делать много из них, хотя она работает только на холсте элемента, а не SVG.

источник

2017-02-17 12:56:49 mgraham

Как сделать одиночный бар как 3d-эффект в d3.js?

ответ

Смежные вопросы