各位大大好
小弟最近剛接觸dc.js
目前正在研究箱型圖的畫法
原本官網給的範例用的很順
但是當我把自己的json資料放進去的時候
顯示出來的圖表就會有問題
每次圖的最後一筆資料會顯示不出來
不管是5筆,20筆都是這樣
想請問是哪裡有問題?
官網程式碼:https://dc-js.github.io/dc.js/examples/box-plot.html
程式碼如下(大部分都跟官網的差不多):
<!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', 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>