Как отобразить вывод 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? Я попробовал сценарий ниже, вставив его в тег body в файле .aspx, но он не поможет. Пожалуйста, предоставьте мне решение. Спасибо в Advance.

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

d3.json (URL [, обратный вызов])

Я вставляемого вашу функцию и закомментировать все, что аксессор функция (строка):

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; 
});