Question

我正在从Quandl的API中导入一些数据，以制作多年来布伦特原油价格图表。我正在使用Angular的HTTP请求提供数据。不知何故，所提供的数据不会被读取为数字，因为我收到以下错误：

错误：属性d：预期数字，“MNaN，NaNLNaN，NaNL ......”。

app.service('oilService', function($http) {
  delete $http.defaults.headers.common['X-Requested-With'];
  this.getData = function() {
  var URL = "https://www.quandl.com/api/v1/datasets/CHRIS/ICE_B1.json";
  return $http({
     method: 'GET',
     url: URL
  })
 }
})

.directive('oilGraph', function() {
 return {
  scope: {},
  controller: function(oilService) {
  var width = 200;
  var height = 100;

  var parseTime = d3.timeParse("%y-%m-%d");

  var x = d3.scaleTime().range([0, width]);
  var y = d3.scaleLinear().range([height, 0]);

  var valueline = d3.line()
      .x(function(d) { return x(d.date); })
      .y(function(d) { return y(d.settle); });
  var svg = d3.select("#oilgraph").append("svg")
        .attr("width", width)
        .attr("height", height);

  oilService.getData()
  .then(function(data) {

      var mapped_data = data.data.data.map(function(d) {
        return {
          date: parseTime(d[0]),
          settle: d[4]
        };
      })

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

      svg.append("path")
          .data([mapped_data])
          .attr("class", "line")
          .attr("d", valueline);

      svg.append("g")
          .attr("transform", "translate(0," + height + ")")
          .call(d3.axisBottom(x));

      svg.append("g")
          .call(d3.axisLeft(y));
    })
   })
  }
 }
})

Answer 1

你的问题只是一个错误的说明符。由于你的约会对象是世纪......

"2017-06-16"

...您应该使用%Y代替%y。根据{{3}}：

％Y - 以十进制数字为世纪的年份。

因此，这应该是你的说明者：

var parseTime = d3.timeParse("%Y-%m-%d");

除此之外，你必须在量表中使用mapped_data，而不是data。

以下是您的代码更改：

＆＃13;

var width = 500;
var height = 200;

var parseTime = d3.timeParse("%Y-%m-%d");

var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);

var valueline = d3.line()
  .x(function(d) {
    return x(d.date);
  })
  .y(function(d) {
    return y(d.settle);
  });

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height);

d3.json("https://www.quandl.com/api/v1/datasets/CHRIS/ICE_B1.json", function(data) {

  var mapped_data = data.data.map(function(d) {
    return {
      date: parseTime(d[0]),
      settle: d[4]
    };
  });

  x.domain(d3.extent(mapped_data, function(d) {
    return d.date;
  }));
  y.domain([0, d3.max(mapped_data, function(d) {
    return d.settle;
  })]);

  svg.append("path")
    .data([mapped_data])
    .attr("class", "line")
    .attr("d", valueline);

  svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));

  svg.append("g")
    .call(d3.axisLeft(y));

})

＆＃13;

path {
  fill: none;
  stroke: black;
}

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>

＆＃13;

Answer 2

据我所知，在

的代码中

       svg.append("path")
      .data([mapped_data])
      .attr("class", "line")
      .attr("d", valueline);`

.attr（＆＃34; d＆＃34;，valueline）; ，＆＃34; valueline给你nan＆＃34;，要么你想要使用value line的属性。即你在你的代码上面设置它的x和y属性。

“错误：<path>属性d：预期编号，”MNaN，NaNLNaN，NaNL ......“。”D3出错

2 个答案: