2016-12-23 29 views
1

私はdc.jsでボックスプロットプロジェクトを進めています。dc.jsいくつかのデータ値は表示されません

私は自分のjsonデータを使用したとき、公式サイトの例を使用していますが、一部のデータが表示されないことを除いて、チャートはかなり良いと表示されます。より多くのデータを使用しても、常に入力データよりもボックスプロットが少なくなります。ここで

は、そのほとんどがbox plot exampleと同じで、私のコードです:ここで

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>dc.js - Box-Plot Example</title> 
    <meta charset="UTF-8"> 
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="../css/dc.css"/> 
</head> 
<body> 

<div class="container"> 
<script type="text/javascript" src="header.js"></script> 
<div id="box-test"></div> 

<script type="text/javascript" src="../js/d3.js"></script> 
<script type="text/javascript" src="../js/crossfilter.js"></script> 
<script type="text/javascript" src="../js/dc.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script> 
<script type="text/javascript"> 

var chart = dc.boxPlot("#box-test") 
d3.json('http://139.162.34.103/datasets/l0mtun7gdtu3dq5/q2kzx7nvfmahnc8iqocldare7/type=json/limit/100', function(experiments){ 
    var ndx     = crossfilter(experiments.records); 
    var xDimension   = ndx.dimension(function(d) {return d.Var;}); 
    var chartdata   = xDimension.group().reduce(
     function(p,v) { 
      console.log(p);//array, empty at first and push data into it 
      console.log(v);//object,every row is a object 
      p.push(v.OR); 
      p.push(v.lower_95); 
      p.push(v.upper_95); 
      return p; 
     }, 
     function(p,v) { 
      //p.splice(p.indexOf(v.OR), 1); 
      //p.splice(p.indexOf(v.lower_95), 1); 
      //p.splice(p.indexOf(v.upper_95), 1); 
      return p; 
     }, 
     function() { 
      return []; 
     } 
    ); 
    chart 
    .width(1000) 
    .height(800) 
    .margins({top: 10, right: 50, bottom: 30, left: 50}) 
    .ordering(function(d) {return d.OR;}) 
    .dimension(xDimension) 
    .group(chartdata) 
    .elasticX(true) 
    .elasticY(true) 
    .yAxisPadding('10%'); 
    chart.tickFormat(d3.format('.3f')); 
    dc.renderAll(); 
}); 

</script> 

</div> 
</body> 
</html> 

は私のJSONデータである:

{"name": "tab5_1.csv", 
    "resource_id": "q2kzx7nvfmahnc8iqocldare7", 
    "success": "true", 
    "records": [ 
    { 
    "id": 1, 
    "Var": "OCHA", 
    "OR": "0.454647654", 
    "lower_95": "0.351652893", 
    "upper_95": "0.587808299" 
    }, 
    { 
    "id": 2, 
    "Var": "Arrival_way", 
    "OR": "0.61785793", 
    "lower_95": "0.381860414", 
    "upper_95": "0.999706719"}, 
    { 
    "id": 3, 
    "Var": "Coma_M", 
    "OR": "0.636045321", 
    "lower_95": "0.610833258", 
    "upper_95": "0.662298007"}, 
    { 
    "id": 4, 
    "Var": "Arrival_way", 
    "OR": "0.681099077", 
    "lower_95": "0.351855361", 
    "upper_95": "1.31842798"}, 
    { 
    "id": 5, 
    "Var": "Ais_face", 
    "OR": "0.68451206", 
    "lower_95": "0.635725252", 
    "upper_95": "0.737042863"} 
    ]} 
+0

実際のコードにxスケールを設定していませんか? 'elasticX'を使用している場合、チャートの右端の要素が失われてしまう[間違いなく量的尺度のバグ](https://github.com/dcjj/dc.js/issues/792)があります。 – Gordon

+0

本当に?私はdc.jsの初心者です。 どうすればよいですか? –

+0

申し訳ありません私は明確ではありませんでした - 実際のコードで '.x()'を設定しているかどうかを尋ねていました。これはボックスプロットのデフォルトである順序尺度でどうなるか分かりません。私は量的スケールの回避策を持っていますが、 'box-plot.html'の例を使って問題を再現することはできません。 – Gordon

答えて

0

はdc.jsの基礎はcrossfilterあり、そしてcrossfilterがすべてですデータのフィルタリングと集計についてCrossfilterディメンションは、フィルタリングする可能性のあるキーを定義し、クロスフィルタグループは、ビンと集約のキーとリダクション関数を定義します。

データが集約されていない場合、クロスフィルタによってフィルタリングと集計がほぼ魔法のように簡単になります。しかし、あなたのデータがすでに集約されているなら、あなたはあなたがフープを飛び越えていると感じるかもしれません。 :)

この場合、データは既に集計されており、次元とグループをd.Varに定義すると、再び集計されます。あなたはたぶんナンセンスな結果を得ているでしょう。それぞれのビンにORlower_95upper_95という値が2つ以上あることになります。

データの各行を独自のビンに入れる場合は、d.idのような一意のキーをディメンションキーとして使用するのが最適な方法です。

ユニークキーが存在しない場合、別の解決方法は、データの整数インデックスにクロスフィルターを作成することです(「クロスフィルターのインデックス」セクションのthis answerを参照)。

関連する問題