Javascript 分析d3折线图JSON数据时出错

在获取折线图上的JSON数据时遇到问题，我可以对条形图执行此操作，但由于某些原因，在执行折线图时会出现错误。附近没有太多文档，所以看看是否有人知道

我得到这个错误

错误：解析问题d=“MNaN，400LNaN，258.65447419986936LNaN，221.90289571086436LNaN，183.32244472022643LNAN，134.29131286740693LNaN，149.70607446113652LNaN，63.1395602003048LNaN，37.44829087742215LNaN，69.4099716960592LNAN，0LNaN，252169.910733405LNAN，643.23971261397”

JSON数据如下：

[{“登录名”：“3333”，“月名”：“一月”}，{“登录名”：“4956”，“月名”：“二月”}，{“登录名”：“5378”，“月名”：“三月”}，{“登录名”：“5821”，“月名”：“四月”}，{“登录名”：“6384”，“月名”：“五月”}，{“登录名”：“6207”，“月名”：“六月”}，{“登录名”：“7201”，“月名”：“七月”}，{“登录名”：“7496”，“月名”，“月名”：“八月”}，{“九月”}，{“登录”：“7926”，“月名”：“十月”}，{“登录”：“5975”，“月名”：“十一月”}，{“登录”：“540”，“月名”：“十二月”}]

现在代码是：

---

有人知道如何修复它以使其显示折线图吗？

您需要解析日期并将数字作为数字传递：

data.forEach(function(d) {
  d.month_name = d3.time.format("%B").parse(d.month_name);
  d.logins = +d.logins;
});

---

如果您在加载JSON后运行此代码，一切都会正常工作。

它似乎缺少一月，并显示1900作为记号。它还有一个多边形形状，而不是真正的直线。您知道为什么吗？添加

路径{fill:none；stroke:black}

添加到CSS中。1900勾号表示一月——如果希望它只显示勾号中的月份，请使用

xAxis.tickFormat（d3.time.format（“%B”））

。好的，CSS开始工作，但我想显示月份为1月、2月。仍然显示1900，可能是因为它靠近Y轴。我如何留下一个空间，使图表线从零开始，并且在1月刻度和Y轴之间有一个空间？这与它离Y轴有多近无关。是否运行了

.tickFormat

调用轴前编码？它现在可以工作了，显示为一月。那么有没有办法将一月移动一次空间，使其不完全在Y轴上？我知道你可能会用一个空值和一个空月来破解它，但有没有更优雅的方法？

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

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

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

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

var line = d3.svg.line()
    .x(function(d) { return x(d.month_name); })
    .y(function(d) { return y(d.logins); });

var svg = d3.select(document.createElement("div")).append("svg")

    .attr("preserveAspectRatio", "xMidYMid")
    .attr("viewBox", "0 0 950 500")
    .attr("width", width)
    .attr("height", width * aspect)
    .attr("id", "art_chart")
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    x.domain(d3.extent(data, function(d) { return d.month_name; }));
    y.domain(d3.extent(data, function(d) { return d.logins; }));
         svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Logins");

  svg.append("path")
      .datum(data)
      .attr("class", "line")
      .attr("d", line);

data.forEach(function(d) {
  d.month_name = d3.time.format("%B").parse(d.month_name);
  d.logins = +d.logins;
});