c# - 从 asp.net 服务器端将坐标传递给 d3js，显示为空

Question

我正在使用 d3js 在地图上进行数据可视化。我能够显示地图，如果我放置静态坐标，它将在地图上显示标记。但我想做的是从数据库中获取坐标并在地图上显示标记，尽管将坐标从服务器端传递到 d3js 是我遇到问题的地方。我已经解决了一些与此相关的问题，到目前为止这对我很有帮助，但我被困在这里，因为传递给 d3js 的方法显示空值。

    var width = window.innerWidth,
                height = window.innerHeight;

            // create svg for viz
            var svg = d3.select("body")
                .append("svg")
                .attr("width", width)
                .attr("height", height);

            // define JSON map data
            d3.json("NGA_adm2_conv.json", function (json) {
                // create a first guess for the projection
                var center = d3.geo.centroid(json);
                var scale = 3000; //150;//8000;
                var offset = [width / 2, height / 2];

                var projection = d3.geo.mercator()
                    .center(center)
                   // .rotate([85.8, 0])
                    .scale(scale)
                    .translate(offset);

                var geoPath = d3.geo.path()
                    .projection(projection);

                svg.append("g")
                    .selectAll("path")
                    .data(json.geometries)
                    .enter()
                    .append("path")
                    .attr("d", geoPath)   
                    .attr("class", "areas")
                    .attr("fill", "Steelblue");
                // Create data for circles:

               //passing method to var marker then to d3
                var markers = '<%= JasonGet() %>';
                // Add circles:
                svg
                  .selectAll("myCircles")
                  .data(markers)
                  .enter()
                  .append("circle")
                    .attr("cx", function (d) { return projection([d.longitude, d.latitude])[0] })
                    .attr("cy", function (d) { return projection([d.longitude, d.latitude])[1] })
                    .attr("r", 4)
                    .style("fill", "69b3a2")
                    .attr("stroke", "#69b3a2")
                    .attr("stroke-width", 2)
                    .attr("fill-opacity", .4)

            });


//below is my asp.net c# code for fetching coordinates from database 

    public string jsonString = "";
            [WebMethod]
            public string JasonGet()
            {
                var queryWithForJson = "SELECT  latitude, longitude FROM tblCoordinates FOR JSON AUTO";
                var conn = new SqlConnection(connetionString);
                var cmd = new SqlCommand(queryWithForJson, conn);
                conn.Open();
                var jsonResult = new StringBuilder();
                var reader = cmd.ExecuteReader();
                if (!reader.HasRows)
                {
                    jsonResult.Append("[]");
                }
                else
                {
                    while (reader.Read())
                    {
                        jsonResult.Append(reader.GetValue(0).ToString());
                    }
                }
                Label1.Text = jsonResult.ToString();
               return (new JavaScriptSerializer()).Serialize(jsonResult);
            }

标签： c#asp.netd3.jsdata-visualization