Question

我想使用D3库生成布林带。我尝试了下面的代码，但不幸的是它抛出了以下错误 -

VM224 d3.v3.js：670错误：属性d：预期数量，＆＃34; M0，NaNL890，NaN的＆＃34;

导致此错误的原因是什么？

代码 -

var margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 50
  },
  width = 960 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

var n = 20; // n-period of moving average
var k = 2; // k times n-period standard deviation above/below moving average

var parseDate = d3.time.format("%m/%d/%Y").parse;

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")
  .tickSize(3, 0);
var line = d3.svg.line()
  .x(function(d) {
    return x(d.date);
  })
  .y(function(d) {
    return y(d.close);
  });
var ma = d3.svg.line()
  .x(function(d) {
    return x(d.date);
  })
  .y(function(d) {
    return y(d.ma);
  });
var lowBand = d3.svg.line()
  .x(function(d) {
    return x(d.date);
  })
  .y(function(d) {
    return y(d.low);
  });
var highBand = d3.svg.line()
  .x(function(d) {
    return x(d.date);
  })
  .y(function(d) {
    return y(d.high);
  });
var bandsArea = d3.svg.area()
  .x(function(d) {
    return x(d.date);
  })
  .y0(function(d) {
    return y(d.low);
  })
  .y1(function(d) {
    return y(d.high);
  });

var svg = d3.select("body").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 + ")");

var data = [
  [
    "9/9/2012",
    1000
  ],
  [
    "9/14/2013",
    100
  ]
];

data.forEach(function(d) {
  d.date = parseDate(d[0]);
  d.close = parseInt(d[1]);

  var bandsData = getBollingerBands(n, k, data);

  x.domain(d3.extent(data, function(d) {
    return d.date;
  }));
  y.domain([d3.min(bandsData, function(d) {
      return d.low;
    }),
    d3.max(bandsData, function(d) {
      return d.high;
    })
  ]);

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

  svg.append("path")
    .datum(bandsData)
    .attr("class", "area bands")
    .attr("d", bandsArea);
  svg.append("path")
    .datum(bandsData)
    .attr("class", "line bands")
    .attr("d", lowBand);
  svg.append("path")
    .datum(bandsData)
    .attr("class", "line bands")
    .attr("d", highBand);
  svg.append("path")
    .datum(bandsData)
    .attr("class", "line ma bands")
    .attr("d", ma);

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

function getBollingerBands(n, k, data) {
  var bands = []; //{ ma: 0, low: 0, high: 0 }
  for (var i = n - 1, len = data.length; i < len; i++) {
    var slice = data.slice(i + 1 - n, i);
    var mean = d3.mean(slice, function(d) {
      return d.close;
    });
    var stdDev = Math.sqrt(d3.mean(slice.map(function(d) {
      return Math.pow(d.close - mean, 2);
    })));
    bands.push({
      date: data[i].date,
      ma: mean,
      low: mean - (k * stdDev),
      high: mean + (k * stdDev)
    });
  }
  return bands;
}

Fiddle

Answer 1

请参阅working jsfiddle

第一个问题是，这是Bollinger Bands，它需要的不仅仅是你提供的2个数据点。将n=20传递给getBollingerBands()时，意味着它需要从20个连续数据点中提取平均值。由于只有2个，它产生了一个空白数组，这反过来导致NaN值进入<path>。

我根据需要将数据数组更新了很长时间。

另一个问题是，而不是：

data.forEach(function(d) {
  d.date = parseDate(d[0]);
  d.close = parseInt(d[1]);
})

你传递给forEach的函数一直向下扩展以包含所有渲染代码（例如svg.append("path")），这意味着它试图在每个数据点渲染整个事物（即可能数百次。）

D3布林带问题

1 个答案: