2016-05-23 36 views
1

私は非常に単純な円グラフであると考えていますが、何とかd3.json関数が全く実行されていません。私のコードは以下の通りです:d3.jsonは実行されません

function omst1() { 
"use strict"; 
var chartWidth = $("#chart").width()*0.5; 
var chartHeight = $("#chart").height()*0.5; 

var margin = { 
    top: chartWidth*0.01, 
    right: chartWidth*0.01, 
    bottom: chartWidth*0.01, 
    left: chartWidth*0.01 
}, 
width = chartWidth - margin.left - margin.right, 
height = chartHeight - margin.top - margin.bottom, 
radius = Math.min(width, height)/2; 

var color = d3.scale.ordinal() 
.range(["#F1BD98", "#DA6A26", "#82A0D3", "#094D86"]) 

var arc = d3.svg.arc() 
.outerRadius(radius - margin.bottom) 
.innerRadius(radius - margin.bottom); 

var pie = d3.layout.pie() 
.sort(null) 
.value(function(d) { 
    return d.Aantal 
} 
); 

var svg = d3.select("#omst1").append("svg") 
.attr("width", width) 
.attr("height", height) 
.append("g") 
.attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 

d3.json("omstandigheden.json", type, function(error, data) { 
    if (error) throw error; 
    console.log(data); 
    var g = svg.selectAll(".arc") 
     .data(pie(data)) 
    .enter().append("g") 
     .attr("class", "arc"); 

    g.append("path") 
     .attr("d", arc) 
     .style("fill", function(d) { return color(d.data.Omstandigheid); }); 

    g.append("text") 
     .attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")"; }) 
     .attr("dy", ".35em") 
     .text(function(d) { return d.data.Omstandigheid; }); 
}); 

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

この設定ではconsole.log(データ)はomstandigheidaantalの値を持つオブジェクトを返す必要があり、JSONファイルは次のように見て、オブジェクトの配列です:

{ 
    "Omstandigheid": "A", 
    "Aantal": 2 
    }, 

最初は、私のインデントがオフであったか、または単に間違った場所でかっこを閉じていると考えました。残念ながら、私のコードでエラーが見つかりませんでしたが、何が間違っていますか?

EDIT:Gerardoの答えの後、私は 'type'パラメータを削除し、 'type'の代わりにforEachを使用しようとしているコードを変更しました。変更されたコードは次のようになりました。

d3.json("omstandigheden.json", function(error, data) { 
     if (error) throw error; 
     console.log(data); 
     var g = svg.selectAll(".arc") 
     .data(pie(data)) 
     .enter().append("g") 
     .attr("class", "arc"); 

     g.append("path") 
     .attr("d", arc) 
     .style("fill", function(d) { return color(d.data.Omstandigheid); }); 

     g.append("text") 
     .attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")"; }) 
     .attr("dy", ".35em") 
     .text(function(d) { return d.data.Omstandigheid; }); 

    data.forEach(function(d) { 
     d.Aantal = +d.Aantal; 
     return d; 
    }) 
}); 
} 
+2

一緒にplnkrを入手できますか?または、コンソールに何もない場合は – thatOneGuy

+0

のコードをすべて表示してください。正しい幅と高さで 'svg'要素をDOMに入れますか?ファイル名とパスを再確認しましたか? – tarulen

+2

あなたはd3.json(ファイル、タイプ、コールバック)を使用しています。その型のパラメータはそこで何をしていますか?私はD3のドキュメントでそのような署名を見つけることができないようです... –

答えて

5

JSON機能のtypeを削除します。 JSON関数は「アクセサ」を許可しません.CSVおよびTSV関数のみが許可します。

したがって、typeを削除し、type関数のすべてがあなたのJSON関数内のforEachを使用して行います。

d3.json("omstandigheden.json", function(error, data) { 

PS:

あなたのJSON関数の最初の行がなければならないあなたはJSONを書い1であれば、あなたはtype機能を必要としない。ただ、数字などの値がありません書きます文字列。

+0

更新していただきありがとうございます。いつも基本的なコードを取り除くのはいいです:) – Yoeri

関連する問題