D3js .tsvデータが変数および属性にロードされていません

Question

d3jsを使用して簡単な棒グラフを描画しようとしています。ここでは、チャートのための私のjavascriptのコードは次のとおりです。

var width = 420, 
    barHeight = 20; 

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

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

d3.tsv("../data/high-court-decisions.tsv", type, function(error, data) { 
    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; 
} 

データを保持している.TSVは形式である：

year decisions 
2015 53 
2014 52 

このスクリプトを介して、ページ上で呼び出されます。<script src="../js/hca-bar-chart.js"></script>。

私はd3js v4ファイルを使用しています。これはvia：<script src="https://d3js.org/d3.v4.min.js"></script>とも呼ばれます。

矩形の「幅」属性にデータが読み込まれているのは明らかです。これは、ページがロードされると見ることができます。

<svg class="chart" width="420" height="200"> 
    <g transform="translate(0,0)"> 
    <rect width="NaN" height="19"></rect> 
    <text x="NaN" y="10" dy=".35em">NaN</text> 
    </g> 

だけでなく、次のコンソールエラー：棒グラフの仕事を作るためにすべての提案を熱望Error: <rect> attribute width: Expected length, "NaN".

。ありがとう！

Answer 1

データにvalueヘッダーがありません。だから、あなたのアクセサ関数を変更します。

function type(d) { 
    d.value = +d.decisions; 
    return d; 
} 

あるいは、あなたのデータを変更します。

year value 
2015 53 
2014 52