Question

我一直在使用d3.js制作饼图。一切正常，但我陷入了3D动画。我需要像http://www.amcharts.com/javascript-charts/3d-pie/

这样的3D视图

请给我你的意见，甚至可以用d3.js来实现这个目标吗？

Answer 1

我对它有独特的答案。我将帮助你在没有任何第三方javascript的情况下制作3D 如果你使用过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效果。休息你需要使用代码来改变颜色和深度以及所有内容

Answer 2

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

Answer 3

我强烈建议您将Highcharts用于您正在寻找的那种饼图。我最近在我的一个应用程序中实现了..你可以在这里查看：

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

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

3 个答案: