Question

在折线图上获取JSON数据存在问题，我可以对条形图完全没问题，但由于某种原因，在做折线图时它会给我一个错误。没有太多的文档，所以看看是否有人知道。

我收到此错误

错误：问题解析d =＆＃34; MNaN，400LNaN，258.65447419986936LNaN，221.90289571086436LNaN，183.32244720226433LNaN，134.29131286740693LNaN，149.70607446113652LNaN，63.1395602003048LNaN，37.44829087742215LNaN，69.40997169605924LNaN，0LNaN，169.91073372523405LNaN，643.2397126061397＆＃34 ;

JSON数据如下：

[{＆＃34;登录＆＃34;：＆＃34; 3333＆＃34;＆＃34; MONTH_NAME＆＃34;：＆＃34; 1＆＃34;}，{＆＃34;登录＆＃34 ;：＆＃34; 4956＆＃34;＆＃34; MONTH_NAME＆＃34;：＆＃34;二月＆＃34;}，{＆＃34;登录＆＃34;：＆＃34; 5378＆＃34;，＆＃34; MONTH_NAME＆＃34;：＆＃34;三月＆＃34;}，{＆＃34;登录＆＃34;：＆＃34; 5821＆＃34;＆＃34; MONTH_NAME＆＃34;：＆＃34;四月＆＃34;}，{＆＃34;登录＆＃34;：＆＃34; 6384＆＃34;＆＃34; MONTH_NAME＆＃34;：＆＃34;五月＆＃34;}，{＆＃34;登录＆＃34;：＆＃34; 6207＆＃34;＆＃34; MONTH_NAME＆＃34;：＆＃34; 6月＆＃34;}，{＆＃34;登录＆＃34;：＆＃34; 7201＆＃34; ＆＃34; MONTH_NAME＆＃34;：＆＃34; 7月＆＃34;}，{＆＃34;登录＆＃34;：＆＃34; 7496＆＃34;＆＃34; MONTH_NAME＆＃34;：＆＃ 34; 8月＆＃34;}，{＆＃34;登录＆＃34;：＆＃34; 7129＆＃34;＆＃34; MONTH_NAME＆＃34;：＆＃34; 9月＆＃34;}，{＆＃34 ;登录＆＃34;：＆＃34; 7926＆＃34;＆＃34; MONTH_NAME＆＃34;：＆＃34; 10月＆＃34;}，{＆＃34;登录＆＃34;：＆＃34; 5975＆＃ 34;，＆＃34; MONTH_NAME＆＃34;：＆＃34;十一月＆＃34;}，{＆＃34;登录＆＃34;：＆＃34; 540＆＃34;＆＃34; MONTH_NAME＆＃34 ;: ＆＃34;腊＆＃34;}]

现在代码：

  var margin = {top: 20, right: 20, bottom: 30, left: 40},    
    width = $("svg").parent().width();
    height = $("svg").parent().height();
    aspect = 500 / 950;

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

任何人都知道如何修复它以显示折线图？

Answer 1

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

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

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

解析d3折线图JSON数据时出错

1 个答案: