Fatal编程技术网
  • javascript/
  • Javascript dc.js未显示某些数据值

Javascript dc.js未显示某些数据值

javascript json

Javascript dc.js未显示某些数据值,javascript,json,dc.js,Javascript,Json,Dc.js,我正在用dc.js做一个方块图项目 我使用的是官方网站dc.js给出的示例，但是当我使用自己的json数据时，图表显示的非常好，除了一些数据从未显示。即使我使用了更多的数据，盒形图也总是比输入数据少 这是我的代码，大部分代码与以下代码相同： js的基础是crossfilter，crossfilter是关于过滤和聚合数据的。交叉筛选维度定义您可能要筛选的关键点，交叉筛选组定义要在其上装箱和聚合的关键点，以及缩减函数 如果您的数据没有聚合，则交叉过滤器可以使过滤和聚合看起来几乎不可思议地简单。但是，

我正在用dc.js做一个方块图项目

我使用的是官方网站dc.js给出的示例，但是当我使用自己的json数据时，图表显示的非常好，除了一些数据从未显示。即使我使用了更多的数据，盒形图也总是比输入数据少

这是我的代码，大部分代码与以下代码相同：

js的基础是crossfilter，crossfilter是关于过滤和聚合数据的。交叉筛选维度定义您可能要筛选的关键点，交叉筛选组定义要在其上装箱和聚合的关键点，以及缩减函数

如果您的数据没有聚合，则交叉过滤器可以使过滤和聚合看起来几乎不可思议地简单。但是，如果您的数据已经聚合，您可能会觉得您正在跳出困境。：）

在这种情况下，数据已经聚合，然后在
d.Var
上定义维度和组意味着它将再次聚合。您可能会得到无意义的结果，因为您最终会在每个箱子中得到多组
或
，
下\u 95
，
上\u 95
值

如果希望数据的每一行都进入自己的存储箱，最好的方法是使用唯一的键，如
d.id
，作为维度键


如果没有唯一的键，另一种解决方案是在数据的整数索引上创建一个交叉过滤器，如中的“索引上的交叉过滤器”部分所述。
dc.js的基础是交叉过滤器，而交叉过滤器是关于过滤和聚合数据的。交叉筛选维度定义您可能要筛选的关键点，交叉筛选组定义要在其上装箱和聚合的关键点，以及缩减函数

如果您的数据没有聚合，则交叉过滤器可以使过滤和聚合看起来几乎不可思议地简单。但是，如果您的数据已经聚合，您可能会觉得您正在跳出困境。：）

在这种情况下，数据已经聚合，然后在
d.Var
上定义维度和组意味着它将再次聚合。您可能会得到无意义的结果，因为您最终会在每个箱子中得到多组
或
，
下\u 95
，
上\u 95
值

如果希望数据的每一行都进入自己的存储箱，最好的方法是使用唯一的键，如
d.id
，作为维度键


如果没有唯一键，另一种解决方案是在数据的整数索引上创建交叉过滤器，如中的“索引上的交叉过滤器”部分所述。
您确定在实际代码中没有设置x刻度吗？当使用
elasticX
时，这些图表中最右边的元素会丢失。哦，真的吗？我是dc.js的新手。我该怎么办？对不起，我不清楚-我是问你是否在实际代码中设置了
.x（）
，因为我不知道顺序比例是如何发生的，这是方框图的默认值。我有一个定量刻度的解决方法，但我不能使用
box plot.html
示例来重新设置问题。上面的代码是我的实际代码。我刚刚测试了我自己的json数据，最后一个数据被隐藏了。嗯，我无法重新编程-我一定是遗漏了什么。你能编辑你的问题并提供一个简短的数据示例吗？你确定你没有在实际代码中设置x刻度吗？当使用
elasticX
时，这些图表中最右边的元素会丢失。哦，真的吗？我是dc.js的新手。我该怎么办？对不起，我不清楚-我是问你是否在实际代码中设置了
.x（）
，因为我不知道顺序比例是如何发生的，这是方框图的默认值。我有一个定量刻度的解决方法，但我不能使用
box plot.html
示例来重新设置问题。上面的代码是我的实际代码。我刚刚测试了我自己的json数据，最后一个数据被隐藏了。嗯，我无法重新编程-我一定是遗漏了什么。您能否编辑您的问题并提供一个简短的数据示例？

<!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>



{"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"}
    ]}