d3.js -使用d3.js的饼图中的3D视图

Question

我一直在用d3.js做饼图。一切都很好，但我被困在3D动画中。我需要一个像http://www.amcharts.com/javascript-charts/3d-pie/一样的3D视图

请给我你的看法，有没有可能用d3.js实现这一点？

Answer 1

WEll我对这个问题有独特的答案。如果你用过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效果。Rest您需要使用代码来更改颜色和深度等所有内容

Answer 2

你可以使用谷歌图表以及它的3d图表https://developers.google.com/chart/interactive/docs/gallery/piechart

Answer 3

我强烈建议将Highcharts用于您正在寻找的一种饼图。我最近在我的一个app..You中实现了它，可以在这里检查它：

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