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

Question

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

请给我你的看法，用 d3.js 是否可以实现这一点？

Answer 1

我对此有独特的答案。我将帮助您将其制作为 3D，无需任何第三方 javascript如果您使用过 Adob​​e 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效果。剩下的，您需要使用代码来更改颜色和深度以及所有内容