How to map json output from [WebMethod] to d3.js bar charts

问题

Hi I am new to d3.js.I have this following [WebMethod] in .aspx file:

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

Now, how to use this output as an input to d3.js bar chart? I tried the below script by pasting it in body tag in .aspx file but it din't help.Please provide me a solution.Thanks in 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>

I have referred d3.js with the following link,

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

回答1:

Unlike d3.csv and d3.tsv, d3.json does not accept an accessor function (or row function).

According to the API, these are the arguments of a d3.csv:

d3.csv(url, row, callback);

Compare with the argument of a d3.json:

d3.json(url[, callback])

I'm pasting your function and commenting out everything that is an accessor (row) function:

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

So, it should be only:

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

And then, right after it, put your accessor (row) function inside d3.json as a forEach:

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

来源：https://stackoverflow.com/questions/40815419/how-to-map-json-output-from-webmethod-to-d3-js-bar-charts

标签

d3.js

webmethod