各位大大好
小弟最近刚接触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>