如何将的json输出映射到d3.js条形图

嗨，我是d3.js.的新手。我在.aspx文件中有以下[WebMethod]：

[WebMethod] public static List GetProductsLINQ() { List lstProducts = new List(); 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("Product_Id"), Product_Name = products.Field("Product_Name"), Product_Code = products.Field("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标签中，但它没有帮助。请给我一个解决方案。谢谢你。

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

我用以下链接引用了d3.js，

Answer 1

与d3.csv和d3.tsv不同， d3.json 不接受访问器函数（或行函数）。

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

d3.csv（url，row，callback）;

与d3.json的参数比较：

d3.json（url [，callback]）

我正在粘贴你的函数并注释掉所有的存取器（行）函数：

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