Question

我正在使用Donut3D.js库（基于D3.js图表库）（http://bl.ocks.org/NPashaP/9994181）。

我已经创建了一个javascript事件监听器来监听select选项Html组合框控件中的更改。用户从组合框中选择一个选项，并根据所选选项，从SQL Server数据库中获取三维饼图的数据，然后重新绘制图表。但是，我的图表没有渲染，尽管当我处于Firebug调试模式时，它会被重新绘制。我正在使用Firefox和Firebug进行调试。我的Web应用程序使用的是MVC模式和C＃编程语言。以下是代码段：

在部分视图1中：

<select id=hucDdl></select>

在部分View2中：

<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>

部分View1（包含选择HTML控件）：

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

部分View2（包含三维饼图）“_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);
}

Donut3D.js三维饼图更改数据事件未触发

1 个答案: