问题：

d3上的MNaN和NaN坐标。js流图

陶瀚玥

2023-03-14

我试图用从Web服务获取的数据重新创建GitHub上显示的交互式流图。我使用与GitHub上的示例相同的代码来生成图形，但是我得到的是路径元素的MNaN和NaN坐标（确切地说，是它们的d属性）。结果是一个空图形，其中仅绘制x轴和y轴，而仅绘制其他轴。

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

.chart { 
  background: #fff;
}

p {
  font: 12px helvetica;
}


.axis path, .axis line {
  fill: none;
  stroke: #000;
  stroke-width: 2px;
  shape-rendering: crispEdges;
}

button {
  position: absolute;
  right: 50px;
  top: 10px;
}

</style>
<body>
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>



<div class="chart"></div>
</body>

<script>
    var dataset;
    function getData() {
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "VoxPoliticoService.asmx/ComparePoliticians",
            data: {},
            dataType: "json",
            success: function (res) {

                dataset = res.d;

                renderChart();
            }
        });
    }

    jQuery(document).ready(function ($) {
        getData();

    });


    function renderChart()
    {
        color = "blue";

        var datearray = [];
        var colorrange = [];
        var data = dataset;




            if (color == "blue") {
                colorrange = ["#045A8D", "#2B8CBE", "#74A9CF", "#A6BDDB", "#D0D1E6", "#F1EEF6"];
            }
            else if (color == "pink") {
                colorrange = ["#980043", "#DD1C77", "#DF65B0", "#C994C7", "#D4B9DA", "#F1EEF6"];
            }
            else if (color == "orange") {
                colorrange = ["#B30000", "#E34A33", "#FC8D59", "#FDBB84", "#FDD49E", "#FEF0D9"];
            }
            strokecolor = colorrange[0];

            var format = d3.time.format("%m/%d/%y");

            var margin = {top: 20, right: 40, bottom: 30, left: 30};
            var width = document.body.clientWidth - margin.left - margin.right;
            var height = 400 - margin.top - margin.bottom;

            var tooltip = d3.select("body")
                .append("div")
                .attr("class", "remove")
                .style("position", "absolute")
                .style("z-index", "20")
                .style("visibility", "hidden")
                .style("top", "30px")
                .style("left", "55px");

            var x = d3.time.scale()
                .range([0, width]);

            var y = d3.scale.linear()
                .range([height-10, 0]);

            var z = d3.scale.ordinal()
                .range(colorrange);

            var xAxis = d3.svg.axis()
                .scale(x)
                .orient("bottom")
                .ticks(d3.time.weeks);

            var yAxis = d3.svg.axis()
                .scale(y);

            var yAxisr = d3.svg.axis()
                .scale(y);

            var stack = d3.layout.stack()
                .offset("silhouette")
                .values(function(d) { return d.values; })
                .x(function(d) { return d.date; })
                .y(function(d) { return d.value; });

            var nest = d3.nest()
                .key(function(d) { return d.key; });

            var area = d3.svg.area()
                .interpolate("cardinal")
                .x(function(d) { return x(d.date); })
                .y0(function(d) { return y(d.y0); })
                .y1(function(d) { return y(d.y0 + d.y); });

            var svg = d3.select(".chart").append("svg")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
              .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

                data.forEach(function(d) {
                    d.date = format.parse(d.date);
                    d.value = +d.value;
                });

                var layers = stack(nest.entries(data));

                x.domain(d3.extent(data, function(d) { return d.date; }));
                y.domain([0, d3.max(data, function(d) { return d.y0 + d.y; })]);

                svg.selectAll(".layer")
                    .data(layers)
                  .enter().append("path")
                    .attr("class", "layer")
                    .attr("d", function(d) { return area(d.values); })
                    .style("fill", function(d, i) { return z(i); });


                svg.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(0," + height + ")")
                    .call(xAxis);

                svg.append("g")
                    .attr("class", "y axis")
                    .attr("transform", "translate(" + width + ", 0)")
                    .call(yAxis.orient("right"));

                svg.append("g")
                    .attr("class", "y axis")
                    .call(yAxis.orient("left"));

                svg.selectAll(".layer")
                  .attr("opacity", 1)
                  .on("mouseover", function(d, i) {
                      svg.selectAll(".layer").transition()
                      .duration(250)
                      .attr("opacity", function(d, j) {
                          return j != i ? 0.6 : 1;
                      })})

                  .on("mousemove", function(d, i) {
                      mousex = d3.mouse(this);
                      mousex = mousex[0];
                      var invertedx = x.invert(mousex);
                      invertedx = invertedx.getMonth() + invertedx.getDate();
                      var selected = (d.values);
                      for (var k = 0; k < selected.length; k++) {
                          datearray[k] = selected[k].date
                          datearray[k] = datearray[k].getMonth() + datearray[k].getDate();
                      }

                      mousedate = datearray.indexOf(invertedx);
                      pro = d.values[mousedate].value;

                      d3.select(this)
                      .classed("hover", true)
                      .attr("stroke", strokecolor)
                      .attr("stroke-width", "0.5px"), 
                      tooltip.html( "<p>" + d.key + "<br>" + pro + "</p>" ).style("visibility", "visible");

                  })
                  .on("mouseout", function(d, i) {
                      svg.selectAll(".layer")
                       .transition()
                       .duration(250)
                       .attr("opacity", "1");
                      d3.select(this)
                      .classed("hover", false)
                      .attr("stroke-width", "0px"), tooltip.html( "<p>" + d.key + "<br>" + pro + "</p>" ).style("visibility", "hidden");
                  })

                var vertical = d3.select(".chart")
                      .append("div")
                      .attr("class", "remove")
                      .style("position", "absolute")
                      .style("z-index", "19")
                      .style("width", "1px")
                      .style("height", "380px")
                      .style("top", "10px")
                      .style("bottom", "30px")
                      .style("left", "0px")
                      .style("background", "#fff");

                d3.select(".chart")
                    .on("mousemove", function(){  
                        mousex = d3.mouse(this);
                        mousex = mousex[0] + 5;
                        vertical.style("left", mousex + "px" )})
                    .on("mouseover", function(){  
                        mousex = d3.mouse(this);
                        mousex = mousex[0] + 5;
                        vertical.style("left", mousex + "px")});

    }

</script>

为方便起见，以下是生成数据集的web服务的代码（C#）：

    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public PoliticianWords[] ComparePoliticians()
    {
        List<PoliticianWords> ret = new List<PoliticianWords>();
        Random r = new Random();
        string[] politicians = { "A B", "C D", "E F", "G H" };

        Random gen = new Random();

        List<DateTime> dates = new List<DateTime>();


        for (int i = 0; i < 20; i++)
        {
            DateTime start = new DateTime(1991, 9, 11);

            int range = (DateTime.Today - start).Days;
            dates.Add(start.AddDays(gen.Next(range)));
        }

        dates.Sort();


        foreach (string politician in politicians)
        { 
            foreach(DateTime d in dates)
            {
                PoliticianWords pw = new PoliticianWords();
                pw.key = politician;
                pw.value = gen.Next(0, 100);
                pw.date = d.Day.ToString() + "/" + d.Month.ToString() + "/" + d.Year.ToString(); 
                ret.Add(pw);
            }
        }

        return ret.ToArray();

    }

编辑1：我忘记将数据集成员的定义添加为C#类。我知道这个问题可能已经在其他问题堆中丢失了，但仍将非常感谢任何帮助：

public class PoliticianWords
{
    public string key { get; set; }
    public int value { get; set; }
    public string date { get; set; }
}

编辑2：我提出了一个示例数据集，结果证明它是有效的。我不是从webservice随机生成它，而是将其存储在。csv文件，并以类似于GitHub中给出的代码的方式获取它。

键、值、日期A B、35,01/10/13A B、38,01/11/13A B、22,01/12/13A B、16,01/13/13A B、22,01/12/13A B、16,01/13/13C D、35,01/08/13C D、36,01/09/13C D、37,01/10/13C D、22,01/11/13C D、24,01/12/13C D、26,01/13/13E F、21,01/08/13E F、25,01/09/13E F、27,01/10/13E F、23,01/11/13E F、24,01/12/13E F、21,01/13/13G H、10,01/08/13G H、15,01/09/13G H、100,01/08/13G H、15,01/09/13G H、35,01/10/13G H、38,01/11/13

这里还有一个非工作示例，一个从webservice获得的随机生成的数据集：

钥匙，价值，日期A B，1,6/5/1992 A B，4,11/29/1992A B，2,11/3/1993A B，7,8/1/1995 A B，9,8/1/1996 A B，15,8/1/1997C D，1,6/5/1992 C D，2,11/29/1992C D，5,11/3/1993C D，10,8/1/1995C D，12,8/1/1996C D，19,8/1/1997E F，1,6/5/1992 E F，20,11/29/1992E F，16,11/3/1993E F，6,8/1/1995 E F，10,8/1/1996E F，5,8/1/1997 G H，1,6/5/1992 G H，17,11/29/1992G H，16,11/3/1993G H，6,8/1/1995 G H，10,8/1/1996G H，20,8/1/1997

阎弘雅

2023-03-14

我找到了一个解决方案，结果证明我的错误是一个蹩脚的错误：日期的格式。正确的格式应包含所有三个组件（日、月、年），每个组件由两位数字（2013年8月1日、2013年9月1日）表示。相反，我的web服务生成日期的格式允许月份和天数用一个数字表示，年份的数字包含所有数字（2013年1月8日、2013年1月9日）。我已经修改了将日期转换为字符串的代码部分（webservice），格式如下。

                if (d.Day < 10)
                    pw.date = "0" + d.Day.ToString();
                else
                    pw.date = d.Day.ToString();
                if (d.Month < 10)
                    pw.date += "/0" + d.Month.ToString();
                else
                    pw.date += "/" + d.Month.ToString();
                int year = d.Year % 100;
                if (year < 10)
                    pw.date += "/0" + year.ToString();
                else
                    pw.date += "/" + year.ToString();

d3上的MNaN和NaN坐标。js流图

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档