带有过渡和插值的角度更新的饼图

时间:2014-05-13 11:21:42

标签: javascript json d3.js

我对D3.js很新。我目前正在使用D3制作饼图。我使用一些教程作为参考制作了一个饼图。   我正在研究使用jquery返回json数据值(通过服务调用)的应用程序 ajax并将json对象传递给function piechart1()

这是我的ajax电话

 var dataset ="";
         $.ajax({    
             type : 'POST',
             url : "/<%out.print(this.getServletContext().getServletContextName());%>/completeRacksAjaxRacksReturn.action",
             data : {selectedSite1:selectedSite},
             cache : false,
             dataType: "json",
             success : function(data){
                 $('#div123').html("");
                                 $('#div456').html("");
                 dataset = [{label : "Avaliable", value : 20},
                       {label : "Shipped", value : 40},
                       {label : "Shipped NR", value : 60},
                       {label : "Shipped Clients", value :90}
                      ];    
                $('#div123').html(piechart1(dataset));                      
              }
          }); 

这是我在jsp中的div标签:

          <table width="90%">
         <tr>
        <td align="left" class="title" style="padding-top: 5px;font-family: Verdana, Arial, sans-serif;font-size: 15px;font-weight: bold;">Synthese:</td>
         </tr>
         <tr>
            <td><div class="hidden" id="div123"></div></td>
         </tr>
         </table>

我制作了一个javascript文件,其中我为D3.js创建了一个函数piechart1(dataset)

现在我使用了dummy data

这是jsfiddle网址(我的工作):myPieChart

我试图制作像targetPieChart

这样的饼图

饼图已完成,但我仍然遇到transitioninterpolation

以及如何从json值中获取ARC startAngleendAngle。这样我就能获得特定弧线的百分比?

有人可以帮助我确切地说我错了吗?

0 个答案:

没有答案