1

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

请给我您的意见，甚至可以用 d3.js 实现这一点吗？

4

3 回答 3

1

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

于 2016-02-05T10:14:30.150 回答
0

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

于 2014-03-12T09:38:51.867 回答
-3

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

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

于 2013-07-08T15:44:32.553 回答