我正在使用 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"}
]}
最佳答案
dc.js 的基础是 crossfilter，而 crossfilter 的作用就是过滤和聚合数据。交叉过滤器维度定义您可能想要过滤的键，交叉过滤器组定义要分类和聚合的键以及缩减函数。
如果您的数据未聚合，交叉过滤器可以使过滤和聚合看起来几乎神奇地简单。但如果您的数据已经聚合，您可能会觉得自己正在经历困难。 :)
在这种情况下，数据已经聚合，然后在 d.Var 上定义维度和组意味着它将再次聚合。您可能会得到无意义的结果，因为您最终会在每个 bin 中得到不止一组 OR、lower_95、upper_95 值.
如果您希望每一行数据都进入自己的存储箱，最好的方法是使用唯一的键(例如 d.id)作为维度键。
如果没有唯一键，另一个解决方案是在数据的整数索引上创建交叉过滤器，如this answer的“索引上的交叉过滤器”部分所述。 .
关于javascript - dc.js 某些数据值未显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41295723/