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效果。放心，你需要的代码打改变颜色和深度，一切