シンプルで怒っているd3.jsの例

Question

地面にd3.jsと入力しています。私に先んじて急いで学ぶ曲線がありますが、私が試みた第2の簡単なチュートリアルにはまだまだ立ち往生するとは思っていませんでした。仲間のプログラマーに最大限の寄与をさせるための変更が今ではあります！

私は、サンプルと事実上同じで、私のデータを使って簡単なsvg棒グラフを取得しようとしています。

ボストックのデータ

name value 
Locke 4 
Reyes 8 
Ford 15 
Jarrah 16 
Shephard 23 
Kwon 42 

私のデータ私たちの第二の列が同じ名前を持つ

year value 
year2013 2476 
year2014 7215 
year2015 23633 
year2016thru229 21752 

注意。どちらも数字を含んでいます。私は自分のデータセットに同じ名前を付けました。したがって、私は事を変えずに（下）彼のコードを実行することができるはずですが、それは、これを返します。

Unexpected value NaN parsing width attribute. 

...uments);null==e?this.removeAttribute(n):this.setAttribute(n,e)}function 

d3.min.js (line 1, col 2575) 

Unexpected value NaN parsing x attribute. 

...uments);null==e?this.removeAttribute(n):this.setAttribute(n,e)}function 

d3.min.js (line 1, col 2575) 

彼のコードだけでなく、チュートリアルhereです。

Answer 1

データを正しい形式で入力しているわけではありません。

https://jsfiddle.net/guanzo/kdcLj5jj/1/

var data = [ 
{year:'year2013',value:2476}, 
{year:'year2014',value:7215}, 
{year:'year2015',value:23633}, 
{year:'year2016thru229',value:21752} 
] 

var width = 420, 
    barHeight = 20; 

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

var chart = d3.select(".chart") 
    .attr("width", width); 

    x.domain([0, d3.max(data, function(d) { return d.value; })]); 

    chart.attr("height", barHeight * data.length); 

    var bar = chart.selectAll("g") 
     .data(data) 
    .enter().append("g") 
     .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; }); 

    bar.append("rect") 
     .attr("width", function(d) { return x(d.value); }) 
     .attr("height", barHeight - 1); 

    bar.append("text") 
     .attr("x", function(d) { return x(d.value) - 3; }) 
     .attr("y", barHeight/2) 
     .attr("dy", ".35em") 
     .text(function(d) { return d.value; }); 


function type(d) { 
    d.value = +d.value; // coerce to number 
    return d; 
}