如何映射JSON輸出[的WebMethod]到d3.js條形圖

Question

您好我是新來d3.js.I有這個以下[的WebMethod]在.aspx文件：

[WebMethod] 
    public static List<Product> GetProductsLINQ() 
    { 
     List<Product> lstProducts = new List<Product>(); 
     DataTable dtProducts = new DataTable(); 
     string sqlQuery = "SELECT Product_Name, Purchase_Price FROM tblProductMaster"; 
     string connectionString = System.Configuration.ConfigurationManager.ConnectionStrings["BTrax"].ConnectionString; 
      SqlConnection conn = new SqlConnection(connectionString); 
      SqlDataAdapter da = new SqlDataAdapter(sqlQuery, conn); 
      da.Fill(dtProducts); 
      var productslinq = (from products in dtProducts.AsEnumerable() 
           select new 
           { 
            //Product_Id = products.Field<decimal>("Product_Id"), 
            Product_Name = products.Field<string>("Product_Name"), 
            Product_Code = products.Field<decimal>("Purchase_Price"), 
       }).ToList(); 
      foreach (var product in productslinq) 
      { 
      //lstProducts.Add(new Product(product.Product_Id,product.Product_Name, product.Product_Code)); 
      lstProducts.Add(new Product(product.Product_Name, product.Product_Code)); 
     } 
    return lstProducts; 
    } 

現在，如何將此輸出用作d3.js條形圖的輸入？我嘗試通過將下面的腳本粘貼到.aspx文件中的body標籤中，但它沒有幫助。請給我一個解決方案。謝謝。

<script> 
    var d; 
    var svg = d3.select("svg"), 
     margin = { top: 20, right: 20, bottom: 30, left: 40 }, 
     width = +svg.attr("width") - margin.left - margin.right, 
     height = +svg.attr("height") - margin.top - margin.bottom; 

    var x = d3.scaleBand().rangeRound([0, width]).padding(0.1), 
     y = d3.scaleLinear().rangeRound([height, 0]); 

    var g = svg.append("g") 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

    d3.json("WebForm1.aspx/GetProductsLINQ", function (json) { 
     d=json 
     d.Product_Code = +d.Product_Code; 
     return d; 
    }, function (error, data) { 
     if (error) throw error; 

     x.domain(data.map(function (d) { return d.Product_Name; })); 
     y.domain([0, d3.max(data, function (d) { return d.Product_Code; })]); 

     g.append("g") 
      .attr("class", "axis axis--x") 
      .attr("transform", "translate(0," + height + ")") 
      .call(d3.axisBottom(x)); 

     g.append("g") 
      .attr("class", "axis axis--y") 
      .call(d3.axisLeft(y).ticks(10, "%")) 
      .append("text") 
      .attr("transform", "rotate(-90)") 
      .attr("y", 6) 
      .attr("dy", "0.71em") 
      .attr("text-anchor", "end") 
      .text("Frequency"); 

     g.selectAll(".bar") 
      .data(data) 
      .enter().append("rect") 
      .attr("class", "bar") 
      .attr("x", function (d) { return x(d.Product_Name); }) 
      .attr("y", function (d) { return y(d.Product_Code); }) 
      .attr("width", x.bandwidth()) 
      .attr("height", function (d) { return height - y(d.Product_Code); }); 
    }); 
</script> 

我所提到與下面的鏈接d3.js，

<script src="https://d3js.org/d3.v4.min.js"></script> 

Answer 1

不同於d3.csv和d3.tsv，d3.json不接受一個訪問器功能（或行功能）。

按照API，這些都是d3.csv的參數：

d3.csv（URL，行，回調）;我在您粘貼功能，並註釋掉一切，這是一個訪問

d3.json（URL [回調]）

：

與d3.json的參數比較（行）功能：

d3.json("WebForm1.aspx/GetProductsLINQ", //function (json) { 
    //d=json 
    //d.Product_Code = +d.Product_Code; 
    //return d; 
//}, 
    function (error, data) { 
     if (error) throw error; 

所以，它應該是唯一的：

d3.json("WebForm1.aspx/GetProductsLINQ", function (error, data) { 
     if (error) throw error; 

，然後後馬上，把裏面d3.json您的訪問（行）功能作爲forEach：

data.forEach(function(d){ 
    d.Product_Code = +d.Product_Code; 
});