d3エラー：<path>属性d：予定日の日付

Question

このエラーに関して半ダースの記事が見つかりましたが、問題が解決しないようです。

データを、それが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; 
}); 

、データが

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

私のXスケール

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

私のxドメインのように見えます

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

私のライン

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

を加え、私のチャート（これが拡張されていることをベースチャートがある）

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

には例外があります...

Error: <path> attribute d: Expected number, 

更新

だから、ここでコードが

これは、これは動作しません

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

正常に動作します代わりにTSVのcsvファイルを使用して、D3サンプルサイトから多かれ少なかれコピーペーストでサンプルデータを使用した作業コードですここでは、同じデータソースを使用して は、私の「基本チャート」基本チャートを拡張

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

    } 
} 

チャートである

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

    } 
} 

あなたが提供したコードでかなりの数の問題がありますが、チャート

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

データ

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 
... 

Answer 1

を呼び出すコード。あなたはそれをすべて貼り付けていないと思います。たとえば、貼り付けた抜粋にはthis.chartが定義されていないため、エラーメッセージを再構成することはできません。あなたがd.yearを解析され、文字列に変えてきたように、しかし、パスは引数として数を必要とします：

エラーメッセージはそれをすべて言う：言われて、それが主な問題を特定することは可能であることを

あなたのコードに「タイプミスマッチ」のようなエラーがあります。

あなたは、あなたが提供したコンソールログであなたのデータの様子を見ることができます。 yearは文字列に変換されます。

d.yearをそのまま残すことをお勧めします。本当に必要な場合は、その形式の日付が必要な場合は、たとえばdateという新しい属性を作成できます。日付を表示するために必要な場合は、それを使用することができます。yearは、元の形式でパス計算に使用できます。