Donut3D.js 3d餅圖更改數據事件不發射

Question

我使用的是Donut3D.js庫（基於D3.js圖庫）（http://bl.ocks.org/NPashaP/9994181）。

我創建了一個javascript事件偵聽器來偵聽選擇選項Html組合框控件中的更改。用戶從組合框中選擇一個選項，並根據所選選項，從SQL Server數據庫中提取三維餅圖的數據，並重新繪製圖表。但是，我的圖表不是渲染，但是當我處於Firebug調試模式時，它將被重新繪製。我使用Firefox和Firebug進行調試。我的Web應用程序使用MVC模式和C＃編程語言。以下是代碼片段：

局部視圖1：

<select id=hucDdl></select> 

局部視圖2：

<script> 
    $(document).ready(function(){ 
    //Event listener when selection changes 
    $("#hucDdl").change(function() { 
     //Get huc value 
     var huc; 

     if($("#hucDdl").val() != null){ 
     huc = $("#hucDdl").val(); 
     }); 

     //Call function 
     ChangeData(); 
    }); 

    function ChangeData(){ 
     <blockquote>var huc = $("#hucDdl").val(); 
     var arr = []; 
     var lulcData = null; 

     //get data from SQL Server 
     $.ajax({<br/></blockquote> 
     url: "/Home/GetBaseLulcJson/", 
     type: "GET", 
     data: {huccode: huc}, 
     dataType: "json", 
     contentType: "application/json; charset=utf-8", 
     success: function(result){ 
      arr = result; 
     }, 
     error: function(data){ 
     } 
    }) 

    lulcData = [ 

    { "label": "Cropland", "value": arr[0], "color": "#ffb3ba" }, 
    { "label": "Forest", "value": arr[1], "color": "#ffdfba" }, 
    { "label": "Pasture", "value": arr[2], "color": "#ffffba" }, 
    { "label": "Rangeland", "value": arr[3], "color": "#baffc9" }, 
    { "label": "Urban", "value": arr[4], "color": "#bae1ff" } 

    ]; 

    //Draw the 3d pie chart 
    Donut3D.draw("blulcpie", getData(), 90, 50, 90, 40, 30, 0); 

    function getData(){ 
     <blockquote>return lulcData.map(function (d) { 
     return { label: d.label, value: +d.value, color: d.color }; 
     }); 

    } 

    }); 
</script> 

的ChangeData（）函數不觸發選擇更改。

有沒有人知道如何讓數據更改時重新繪製圖表？

從SQL Server獲取的數據是正確的。我只是不確定是什麼原因導致圖表不能重新繪製。

Answer 1

解決了這個問題。我修改我的代碼如下：

Index.cshmtl（主視圖）：

<!--d3.js references--> 
<script src="http://d3js.org/d3.v3.min.js" type="text/javascript"></script> 
<script src="~/myscripts/donut3d.js" type="text/javascript"></script> 
<div id="bLulc"> 
    <label>Major Landuse</label> 
    @Html.Partial("~/Views/Shared/_BaseLanduse.cshtml") 
</div> 

局部視圖1（持有選擇HTML控件）：

<select id = "hucDdl"></select> 

局部視圖2（包含3D餅圖圖表） 「_BaseLanduse.cshtml」：

<script type="text/javascript"> 
$(document).ready(function() { 
//Set default array values for initial display on page load 
var def_arr = [0.2, 80.3, 1.9, 16.9, 0.7]; 
var defData = [ 
    { "label": "Cropland", "value": def_arr[0], "color": "#ffb3ba" }, 
    { "label": "Forest", "value": def_arr[1], "color": "#ffdfba" }, 
    { "label": "Pasture", "value": def_arr[2], "color": "#ffffba" }, 
    { "label": "Rangeland", "value": def_arr[3], "color": "#baffc9" }, 
    { "label": "Urban", "value": def_arr[4], "color": "#bae1ff" } 
]; 

//Define chart parameters 
var margin = { top: 0, right: 20, bottom: 0, left: 20 } 
var width = 180, 
    height = 230 - margin.bottom; 

var svg = d3.select("#bLulc") 
    .append("svg") 
    .attr("width", width) 
    .attr("height", height); 

    svg.append("g") 
     .data([defData]) 
     .attr("id", "blulcpie"); 

    //Draw the chart 
    Donut3D.draw("blulcpie", defData, 90, 50, 90, 40, 30, 0); 

    //Define legend square size 
    var legendSpace = 4; 
    var rectSize = 8; 

    //Add legend 
    defData.forEach(function (d, i) { 
     svg.append("rect") 
      .attr("transform", "translate(0," + i * (rectSize + legendSpace) + ")") 
      .attr("class", "rect") 
      .attr("width", rectSize) 
      .attr("height", rectSize) 
      .attr("x", 50)  //x-axis of rect 
      .attr("y", 130)  //y-axis of rect 
      .style("stroke", "#000000") 
      .style("stroke-width", .25) 
      .style("fill", defData[i].color); 
     svg.append("text") 
      .attr("class", "legend") 
      .attr("x", rectSize + legendSpace) 
      .attr("y", (i * legendSpace) + (i * rectSize)) 
      .attr("dx", 50)  //x-axis of text 
      .attr("dy", 138) //y-axis of text 
      .style("font-size", "10px") 
      .text(defData[i].label); 
    }); 

    //Event listener when huccode changes 
    $("#hucDdl").bind("mousedown mouseup", function() { 
     debugger; 
     //Get data from SQL Server via Controller 
     $.ajax({ 
      url: "/Home/GetBaseLulcJson/", 
      type: "GET", 
      data: { huccode: $("#hucDdl").val() }, 
      dataType: "json", 
      contentType: "application/json; charset=utf-8", 
      success: function (result) { 
       arr = result; 
       //alert(arr); 
      }, 
      error: function (data) { 
       //alert(data); 
      } 
     }) 

     var currData = [ 
       { label: "Cropland", value: arr[0], color: "#ffb3ba" }, 
       { label: "Forest", value: arr[1], color: "#ffdfba" }, 
       { label: "Pasture", value: arr[2], color: "#ffffba" }, 
       { label: "Rangeland", value: arr[3], color: "#baffc9" }, 
       { label: "Urban", value: arr[4], color: "#bae1ff" } 
     ]; 

     Donut3D.transition("blulcpie", currData, 90, 40, 30, 0); 
    }); 
}); 

控制器：

[HttpGet] 
public JsonResult GetBaseLulcJson(string huccode) 
{  
    //Returns single row, selected columns 
    var lulcBase = (from f in db.FractionsLulcs 
     where f.HUCCODE == huccode 
     select new 
     { 
      f.Cropland, 
      f.Forest, 
      f.Pasture, 
      f.Range, 
      f.Urban 
      }).SingleOrDefault(); 

    //Convert to percentage 
    double?[] lulc = new double?[5]; 
    lulc[0] = Math.Round(Convert.ToDouble(lulcBase.Cropland) * 100, 1); 
    lulc[1] = Math.Round(Convert.ToDouble(lulcBase.Forest) * 100, 1); 
    lulc[2] = Math.Round(Convert.ToDouble(lulcBase.Pasture) * 100, 1); 
    lulc[3] = Math.Round(Convert.ToDouble(lulcBase.Range) * 100, 1); 
    lulc[4] = Math.Round(Convert.ToDouble(lulcBase.Urban) * 100, 1); 

    return Json(lulc, JsonRequestBehavior.AllowGet); 
}