d3错误:属性d:预期数字日期。-d3Error:attributed:Expectednumberdate

So I've found a half dozen posts regarding this error but none seem to resolve my issue.

所以我找到了六个关于这个错误的帖子，但是没有一个能解决我的问题。

The data as it comes from firebase:

数据来自firebase:

data = [{percent:24,year:1790},....]

var parseDate = d3.time.format("%Y").parse; 
// so I want to convert the year to a 'date' for d3 time scale
data.forEach(function(d) {
  d.year = parseDate(d.year.toString());
  d.percent = +d.percent;
});

which then the data looks like

那么数据是什么样的呢?

console.log(data);
[{percent:24,year:Fri Jan 01 1790 00:00:00 GMT-0500 (EST)}...]

my x scale

x规模

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

my x domain

x域

x.domain(d3.extent(data, function(d){return d.year; }));

my line

我的线

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

then my chart (there is a base chart that this is extending)

然后是我的图表(这里有一个基本的图表，它在扩展)

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

Which when added has the exception ...

当添加的时候有例外…

Error:  attribute d: Expected number,

UPDATE

更新

So here is the working code using sample data the code is more or less a copy paste from d3 example site using a csv instead of tsv

这里是使用样本数据的工作代码，代码或多或少是来自d3示例站点的复制粘贴，使用csv而不是tsv。

This works fine

这工作好

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

var formatDate = d3.time.format("%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.date); })
    .y(function(d) { return y(d.close); });

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

d3.csv("./data/debt-public-percent-gdp.csv", type, function(error, data) {
  if (error) throw error;
  x.domain(d3.extent(data, function(d) { return d.date; }));
  y.domain(d3.extent(data, function(d) { return d.close; }));

  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("Price ($)");

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

function type(d) {
  d.date = formatDate.parse(d.date);
  d.close = +d.close;
  return d;
}

This does not work Using the same datasource here is my 'Base Chart'

这不能使用相同的数据源这是我的"基本图表"

export class BaseChart{
   constructor(data,elem,cOnfig= {}){
      var d3 = require('d3');
      this.data = data;
      this.svg = d3.select('#'+elem).append('svg');
      this.margin = {
         left: 30,
         top: 30,
         right: 30,
         bottom: 30,
      };

      let width = config.width ? config.width : 600;
      let height = config.height ? config.height : 300;
      this.svg.attr('height', height);
      this.svg.attr('width', width);

      this.width = width - this.margin.left - this.margin.right;
      this.height = height - this.margin.top - this.margin.bottom;
      this.chart = this.svg.append('g')
         .attr('width', this.width)
         .attr('height', this.height)
         .attr('transform', `translate(${this.margin.left},${this.margin.top})`);

   }
}

Chart that Extends the Base Chart

扩展基本图表的图表。

export class FedDebtPercentGDP extends BaseChart{
  constructor(data, elem, config){
    super(data, elem, config);

         var x = d3.time.scale().range([0, this.width]);
var y = d3.scale.linear().range([this.height, 0]);
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain(d3.extent(data, function(d) { return d.close; }));

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.date); })
    .y(function(d) { return y(d.close); });

  this.chart.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + this.height + ")")
      .call(xAxis);
  //
  this.chart.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("Price ($)");

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

  }
}

The code that calls the chart

调用图表的代码。

d3.csv('./data/debt-public-percent-gdp.csv', type, function(error, data) {
   new FedDebtPercentGDP(data, "debt-to-gdp", {width: '100%'});
});

The data

的数据

date,close
1790,30
1791,29
1792,28
1793,24
1794,22
1795,19
1796,16
1797,17
1798,16
1799,16
1800,15
1801,13
1802,14
1803,14
1804,13
1805,11
1806,10
1807,10
1808,9
1809,7
1810,6
1811,6
1812,7
1813,8
1814,9
1815,10
1816,10
1817,8
1818,7
1819,7
1820,8
1821,9
1822,8
1823,8
1824,8
1825,7
1826,6
1827,6
1828,5
1829,4
1830,3
1831,2
1832,1
1833,0
1834,0
1835,0
1836,0
1837,0
1838,1
1839,0
1840,0
1841,1
1842,1
1843,2
1844,1
1845,1
1846,1
1847,2
1848,2
1849,3
1850,2
...

1 个解决方案