Question

我正在研究一个带有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"}
    ]}

Answer 1

dc.js的基础是crossfilter，而crossfilter则是关于过滤和聚合数据的。 Crossfilter维度定义了您可能要过滤的键，而crossfilter组定义了bin和聚合的键，以及缩减函数。

如果您的数据未汇总，则crossfilter可以使过滤和聚合看起来几乎非常简单。但如果您的数据已经汇总，您可能会觉得自己正在跳过箍。：）

在这种情况下，数据已经汇总，然后在d.Var上定义维度和组意味着它将再次聚合。您可能会收到无意义的结果，因为每个bin中最多会有一组OR，lower_95，upper_95值。

如果您希望数据的每一行都放入自己的bin中，最好的方法是使用唯一键（如d.id）作为维度键。

如果没有唯一键，另一种解决方案是在数据的整数索引上创建一个交叉滤波器，如this answer中“Crossfilter on indices”部分所述。

dc.js未显示某些数据值

1 个答案: