<path>属性d3.js的值无效

时间:2016-03-21 12:58:41

标签: javascript asp.net-mvc d3.js date-parsing

当我尝试运行此代码snipet时,我收到了错误 错误:

Invalid value for <path> attribute d="MNaN,533.3333333333333LNaN,533.3333333333333LNaN,533.3333333333333LNaN,533.3333333333333". error is for parsing the date.

Json数据:

[{
  "Date": "2016-03-03",
  "Rank": 1,
  "Accession": "00005768-201305001-00045"
}, {
  "Date": "2016-03-11",
  "Rank": 1,
  "Accession": "00005768-201305001-00045"
}]

Javascript:

$(document).ready(function() {
  jsondatafun();
});

function jsondatafun() {
  var combinedData = {
    RowKey: rowKey,
    DataType: dataType
  }
  $.ajax({
    type: "GET",
    url: '/Home/RankLineJsonResult',
    data: combinedData,
    contentType: "application/json",
    dataType: "json"
  }).success(function(data) {
    plotChart(data);
  })
}

function plotChart(data) {
  //console.log(data);
  data = JSON.parse(data);
  var accession = data[0].Accession;
  //console.log(accession);

  //Defining time format
  var dateFormat = d3.time.format('%Y-%m-%d');

  //initializing dimensions of the visulisation
  var vis = d3.select("#visualisation").append('svg'),
    WIDTH = 800,
    HEIGHT = 600,
    MARGINS = {
      top: 20,
      right: 50,
      bottom: 20,
      left: 50
    }

  vis.attr('height', HEIGHT)
    .attr('width', WIDTH);

  //Defining range for x. Defining range and domain for y
  var x = d3.time.scale().range([MARGINS.left, WIDTH - MARGINS.right])
  var y = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]) //.domain([0, 20])
  console.log("data length:" + data.length);

  //Defining domain for x
  x.domain(d3.extent(data, function(d) {
    return dateFormat.parse(d.Date);
  }));
  y.domain([0, 12]);

  //Define x axis
  var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(5)
    .tickFormat(dateFormat);

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

  //Appending the axes to the svg
  vis.append("svg:g")
    .attr("class", "axis")
    .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
    .call(xAxis);

  vis.append("svg:g")
    .attr("class", "axis")
    .attr("transform", "translate(" + (MARGINS.left) + ",0)")
    .call(yAxis)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Rank");

  //Define line
  var lineGen = d3.svg.line()
    //.interpolate("monotone")
    .x(function(d) {
      return x(dateFormat.parse(d.Date));
    })
    .y(function(d) {
      return y(d.Rank);
    });

  //Appending the line to the svg
  vis.append('svg:path')
    .attr('d', lineGen(data))
    .attr('stroke', 'steelblue')
    .attr('stroke-width', 2)
    .attr('fill', 'none');

  vis.append("svg:text")
    .attr("x", (WIDTH / 2))
    .attr("y", 25)
    .attr("text-anchor", "middle")
    .style("font-size", "16px")
    .style("text-decoration", "underline")
    .text("Rank vs Date Graph of " + accession);
}

0 个答案:

没有答案