如何将JSON输出从[WebMethod]映射到d3.js条形图 [英] How to map json output from [WebMethod] to d3.js bar charts

问题描述

我是d3.js的新手.我在.aspx文件中有以下[WebMethod]:

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

推荐答案

与d3.csv和d3.tsv不同，d3.json 不不接受访问器函数(或行函数).

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

根据 API ，这些是d3.csv的参数:

d3.csv(URL，行，回调);

d3.csv(url, row, callback);

与d3.json的参数进行比较:

d3.json(url [，回调])

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;

所以，它应该仅仅是:

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

然后，紧随其后，将访问器(行)函数作为forEach放在d3.json中:

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

这篇关于如何将JSON输出从[WebMethod]映射到d3.js条形图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！