ordinal

ordinal

关注
发信
关注(28)粉丝(399)

javascript - dc.js中带有计数的条形图

我正在尝试创建一个条形图，该条形图将按标识符显示记录计数，并且无法使其正确显示。

希望有人可以看看并发现我的问题所在。

我连接到一个数据源，该数据源返回如下所示的对象数组：

[{
    "pollCycleCount": 1,
    "identifier": "21",
    "value": "Value",
    "timestamp": "2015-03-12T18:47:28-05:00",
    "collection": "D4B5D33B-9151-46BB-AF2A-71FDFEB5E573",
    "readableTimestamp": "Thu Mar 12 2015 23:47:28 GMT+0000 (UTC)",
    "name": "name",
    "description": "description"
},
...]


标识符字段将是我要计算的数量。

这是我到目前为止的代码：

var dateFormat = d3.time.format.iso;

d3.json("http://url-to-web-service-that-returns-out-data")
.header("Content-Type", "application/json")
.post(JSON.stringify({"apiKey": "private_key", "collection":"D4B5D33B-9151-46BB-AF2A-71FDFEB5E573"}), function(error, data)
{
    if(error)
    {
        console.log(error);
        return;
    }

    console.log(data);

    var xAxisUnits = [""];

    data.forEach(function (d)
    {
        d.timestamp = dateFormat.parse(d.timestamp);
        d.decodedValue = +d.decodedValue;

        if(xAxisUnits.indexOf(d.identifier) == -1 && typeof d.identifier != "undefined")
        {
            xAxisUnits.push(d.identifier);
        }
    });

    console.log(xAxisUnits);

    var ndx = crossfilter(data);

    var idCountDim = ndx.dimension(function(d) { return d.identifier; });
    var idCountGroupCount = idCountDim.group().reduceCount(function(d) { return d.identifier; });

    var barChart = dc.barChart("#barChart");

    barChart.width(480)
        .height(150)
        .margins({top: 10, right: 10, bottom: 20, left: 40})
        .dimension(idCountDim)
        .group(idCountGroupCount)
        .transitionDuration(500)
        .centerBar(true)
        .x(d3.scale.ordinal().domain(xAxisUnits))
        .xUnits(d3.scale.ordinal)
        .elasticY(true)
        .xAxis().tickFormat();

    dc.renderAll();
});


HTML文件主体如下所示：

<body>
<script src="./js/crossfilter.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="./js/dc.min.js"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
<script src="./js/graph.js"></script><!-- Javascript referenced above. -->

<div id="barChart"></div>
</body>


这里更新是一个返回的数据样本，该样本应显示3个每根都高的条形图。

[{
"pollCycleCount": 1,
"identifier": "21",
"value": "Value",
"timestamp": "2015-03-12T18:47:28-05:00",
"collection": "D4B5D33B-9151-46BB-AF2A-71FDFEB5E573",
"readableTimestamp": "Thu Mar 12 2015 23:47:28 GMT+0000 (UTC)",
"name": "name",
"description": "description"
},
{
"pollCycleCount": 1,
"identifier": "11",
"value": "Value2",
"timestamp": "2015-03-12T18:47:28-05:00",
"collection": "D4B5D33B-9151-46BB-AF2A-71FDFEB5E573",
"readableTimestamp": "Thu Mar 12 2015 23:47:28 GMT+0000 (UTC)",
"name": "name2",
"description": "description"
},
{
"pollCycleCount": 1,
"identifier": "31",
"value": "Value3",
"timestamp": "2015-03-12T18:47:28-05:00",
"collection": "D4B5D33B-9151-46BB-AF2A-71FDFEB5E573",
"readableTimestamp": "Thu Mar 12 2015 23:47:28 GMT+0000 (UTC)",
"name": "name3",
"description": "description"
}]

最佳答案

据我所知，实际上可以显示一张图表只是一件错误的事情，尽管它可能并不完全符合您的期望。

首先，这是一个有效的代码段：



var dateFormat = d3.time.format.iso;

var data = [{
        "pollCycleCount": 1,
        "identifier": "21",
        //"value": "Value",
        "value": "100",
        "timestamp": "2015-03-12T18:47:28-05:00",
        "collection": "D4B5D33B-9151-46BB-AF2A-71FDFEB5E573",
        "readableTimestamp": "Thu Mar 12 2015 23:47:28 GMT+0000 (UTC)",
        "name": "name",
        "description": "description"
    },
    {
        "pollCycleCount": 1,
        "identifier": "21",
        //"value": "Value2",
        "value": "120",
        "timestamp": "2015-03-12T18:47:28-05:00",
        "collection": "D4B5D33B-9151-46BB-AF2A-71FDFEB5E573",
        "readableTimestamp": "Thu Mar 12 2015 23:47:28 GMT+0000 (UTC)",
        "name": "name2",
        "description": "description"
    },
    {
        "pollCycleCount": 1,
        "identifier": "11",
        //"value": "Value2",
        "value": "100",
        "timestamp": "2015-03-12T18:47:28-05:00",
        "collection": "D4B5D33B-9151-46BB-AF2A-71FDFEB5E573",
        "readableTimestamp": "Thu Mar 12 2015 23:47:28 GMT+0000 (UTC)",
        "name": "name2",
        "description": "description"
    },
    {
        "pollCycleCount": 1,
        "identifier": "11",
        //"value": "Value2",
        "value": "100",
        "timestamp": "2015-03-12T18:47:28-05:00",
        "collection": "D4B5D33B-9151-46BB-AF2A-71FDFEB5E573",
        "readableTimestamp": "Thu Mar 12 2015 23:47:28 GMT+0000 (UTC)",
        "name": "name2",
        "description": "description"
    },
    {
        "pollCycleCount": 1,
        "identifier": "11",
        //"value": "Value2",
        "value": "100",
        "timestamp": "2015-03-12T18:47:28-05:00",
        "collection": "D4B5D33B-9151-46BB-AF2A-71FDFEB5E573",
        "readableTimestamp": "Thu Mar 12 2015 23:47:28 GMT+0000 (UTC)",
        "name": "name2",
        "description": "description"
    },
    {
        "pollCycleCount": 1,
        "identifier": "31",
        //"value": "Value3",
        "value": "100",
        "timestamp": "2015-03-12T18:47:28-05:00",
        "collection": "D4B5D33B-9151-46BB-AF2A-71FDFEB5E573",
        "readableTimestamp": "Thu Mar 12 2015 23:47:28 GMT+0000 (UTC)",
        "name": "name3",
        "description": "description"
    }];

/*
d3.json("http://url-to-web-service-that-returns-out-data")
.header("Content-Type", "application/json")
.post(JSON.stringify({"apiKey": "private_key", "collection":"D4B5D33B-9151-46BB-AF2A-71FDFEB5E573"}), function(error, data)
        {
        if(error)
        {
        console.log(error);
        return;
        }

*/
        console.log(data);

        var xAxisUnits = [""];

        data.forEach(function (d) {
            d.timestamp = dateFormat.parse(d.timestamp);
            d.decodedValue = +d.value;

            if(xAxisUnits.indexOf(d.identifier) == -1 && typeof d.identifier != "undefined")
            {
                xAxisUnits.push(d.identifier);
            }
        });


        console.log(xAxisUnits);

        var ndx = crossfilter(data);

        var idCountDim = ndx.dimension(function(d) { return d.identifier; });
        var idCountGroupCount = idCountDim.group().reduceCount(function(d) { return d.identifier; });

        var barChart = dc.barChart("#barChart");

        barChart.width(480)
            .height(150)
            .margins({top: 10, right: 10, bottom: 20, left: 40})
            .dimension(idCountDim)
            .group(idCountGroupCount)
            .transitionDuration(500)
            .centerBar(true)
            .x(d3.scale.ordinal().domain(xAxisUnits))
            .xUnits(dc.units.ordinal)
            .elasticY(true)
            .xAxis().tickFormat();

        dc.renderAll();
/*
        });
*/

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.min.js" charset="utf-8"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>

<div id="barChart"></div>





更改为：


根据Using an ordinal scale ('d3.scale.ordinal') for the x-axis in a bar chart，您的xUnits设置为d3.scale.ordinal，实际上您希望它是dc.units.ordinal


这是另一个具有进一步变化的代码段：



var dateFormat = d3.time.format.iso;

var data = [{
        "pollCycleCount": 1,
        "identifier": "21",
        //"value": "Value",
        "value": "100",
        "timestamp": "2015-03-12T18:47:28-05:00",
        "collection": "D4B5D33B-9151-46BB-AF2A-71FDFEB5E573",
        "readableTimestamp": "Thu Mar 12 2015 23:47:28 GMT+0000 (UTC)",
        "name": "name",
        "description": "description"
    },
    {
        "pollCycleCount": 1,
        "identifier": "21",
        //"value": "Value2",
        "value": "120",
        "timestamp": "2015-03-12T18:47:28-05:00",
        "collection": "D4B5D33B-9151-46BB-AF2A-71FDFEB5E573",
        "readableTimestamp": "Thu Mar 12 2015 23:47:28 GMT+0000 (UTC)",
        "name": "name2",
        "description": "description"
    },
    {
        "pollCycleCount": 1,
        "identifier": "11",
        //"value": "Value2",
        "value": "100",
        "timestamp": "2015-03-12T18:47:28-05:00",
        "collection": "D4B5D33B-9151-46BB-AF2A-71FDFEB5E573",
        "readableTimestamp": "Thu Mar 12 2015 23:47:28 GMT+0000 (UTC)",
        "name": "name2",
        "description": "description"
    },
    {
        "pollCycleCount": 1,
        "identifier": "11",
        //"value": "Value2",
        "value": "100",
        "timestamp": "2015-03-12T18:47:28-05:00",
        "collection": "D4B5D33B-9151-46BB-AF2A-71FDFEB5E573",
        "readableTimestamp": "Thu Mar 12 2015 23:47:28 GMT+0000 (UTC)",
        "name": "name2",
        "description": "description"
    },
    {
        "pollCycleCount": 1,
        "identifier": "11",
        //"value": "Value2",
        "value": "100",
        "timestamp": "2015-03-12T18:47:28-05:00",
        "collection": "D4B5D33B-9151-46BB-AF2A-71FDFEB5E573",
        "readableTimestamp": "Thu Mar 12 2015 23:47:28 GMT+0000 (UTC)",
        "name": "name2",
        "description": "description"
    },
    {
        "pollCycleCount": 1,
        "identifier": "31",
        //"value": "Value3",
        "value": "100",
        "timestamp": "2015-03-12T18:47:28-05:00",
        "collection": "D4B5D33B-9151-46BB-AF2A-71FDFEB5E573",
        "readableTimestamp": "Thu Mar 12 2015 23:47:28 GMT+0000 (UTC)",
        "name": "name3",
        "description": "description"
    }];

/*
d3.json("http://url-to-web-service-that-returns-out-data")
.header("Content-Type", "application/json")
.post(JSON.stringify({"apiKey": "private_key", "collection":"D4B5D33B-9151-46BB-AF2A-71FDFEB5E573"}), function(error, data)
        {
        if(error)
        {
        console.log(error);
        return;
        }

*/
        console.log(data);

        data.forEach(function (d) {
            d.timestamp = dateFormat.parse(d.timestamp);
            d.decodedValue = +d.value;
        });


        var ndx = crossfilter(data);

        var idCountDim = ndx.dimension(function(d) { return d.identifier; });
        var idCountGroupCount = idCountDim.group().reduceCount(function(d) { return d.identifier; });

        var barChart = dc.barChart("#barChart");

        barChart.width(480)
            .height(150)
            .margins({top: 10, right: 10, bottom: 20, left: 40})
            .dimension(idCountDim)
            .group(idCountGroupCount)
            .transitionDuration(500)
            .centerBar(true)
            .x(d3.scale.ordinal().domain(d3.set(data.map(function(d) { return d.identifier; })).values()))
            .xUnits(dc.units.ordinal)
            .elasticY(true)
            .xAxis().tickFormat();

        dc.renderAll();
/*
        });
*/

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.min.js" charset="utf-8"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>

<div id="barChart"></div>





此处的更改是：


您计算xAxisUnits（以及您的域）的方式似乎不正确，因此我将其替换为：

d3.set(data.map(function(d) { return d.identifier; })).values()


这将创建一个包含所有唯一identifier值的数组。


我认为它看起来不正确的原因是因为那里有一个额外的空值（由于使用""初始化了数组，该数组创建了一个空字符串作为数组中的第一个元素），并且没有排序。根据标识符值创建一个集合将为您解决这一问题。

这不一定适合您的需求，但对我来说，可视化是有意义的。

注意：数据中的value属性是字符串，并且您试图将其强制为代码中的整数，这可能只是您提供的示例数据的特殊性，无论如何都不会在这个例子中没有任何区别。

10-03 00:14
Powered by LMLPHP ©2024 ordinal 0.032048