d3.js - 餅圖中使用d3.js的3D視圖

Question

我一直在使用d3.js製作餅圖。一切正常，但我卡在一個3D動畫。我需要就像http://www.amcharts.com/javascript-charts/3d-pie/

3D視圖請給我你的意見，是它甚至有可能與d3.js實現這一目標？

Answer 1

我強烈建議您使用Highcharts作爲您正在尋找的餅圖。我在app..You的一個近期實施可以點擊此處查看：

http://www.highcharts.com/demo/pie-basic

Answer 2

你可以使用谷歌的圖表，以及它的三維圖 https://developers.google.com/chart/interactive/docs/gallery/piechart

Answer 3

下面是使用D3.js解決方案：

http://bl.ocks.org/NPashaP/9994181

http://d3pie.org/#

Answer 4

我可以有獨特的答案。我會幫你做到這一點，沒有任何第三方javascript 如果你已經使用Adobe illustrator，你會知道它有過濾器，可以實現任何svg元素爲3d

我已經利用該屬性，使其3D

<defs> 
     <filter id="filters" > 
     <feFlood flood-color="#CCCCCC" result="COLOR-red" /> 
     <feMorphology operator="dilate" radius="-3" in="SourceAlpha" result="STROKE_10" /> 
     <feConvolveMatrix order="10,10" divisor="1" kernelMatrix=" 
     0 0 0 0 0 0 0 0 0 0 
     0 0 0 0 0 0 0 0 0 0 
     0 0 0 0 0 0 0 0 0 0 
     0 0 0 0 0 0 0 0 0 0 
     0 0 0 0 0 0 0 0 0 0 
     0 0 1 1 0 0 0 0 0 0 
     0 0 1 1 1 1 0 0 0 0 
     0 0 1 1 1 1 1 1 0 0 
     0 0 1 1 1 1 1 1 1 0 
     0 0 1 1 1 1 1 1 1 1" in="STROKE_10" result="BEVEL_20" /> 
     <feOffset dx="1" dy="1" in="BEVEL_0" result="BEVEL_25"/> 
     <feComposite operator="out" in="BEVEL_25" in2="STROKE_10" result="BEVEL_30"/>  
     <feComposite in="COLOR-red" in2="BEVEL_30" operator="in" result="BEVEL_40" />  
     <feMerge result="BEVEL_50"> 
     <feMergeNode in="BEVEL_40" />  
     <feMergeNode in="SourceGraphic" /> </feMerge> 
     </filter> 
     </defs> 

嵌入該代碼添加到您的SVG和添加屬性filter="url(#filters)"到你想要把過濾器像 元素如果有喜歡的<g></g>元素只是添加<g class="whatever" filter="url(#filter)"></g> 你會得到3D效果。放心，你需要的代碼打改變顏色和深度，一切