私は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"}
]}
実際のコードにxスケールを設定していませんか? 'elasticX'を使用している場合、チャートの右端の要素が失われてしまう[間違いなく量的尺度のバグ](https://github.com/dcjj/dc.js/issues/792)があります。 – Gordon
本当に?私はdc.jsの初心者です。 どうすればよいですか? –
申し訳ありません私は明確ではありませんでした - 実際のコードで '.x()'を設定しているかどうかを尋ねていました。これはボックスプロットのデフォルトである順序尺度でどうなるか分かりません。私は量的スケールの回避策を持っていますが、 'box-plot.html'の例を使って問題を再現することはできません。 – Gordon