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

标签 javascript d3.js 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>

变化是:

这是另一个经过进一步更改的代码片段:

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()

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

我认为它看起来不正确的原因是因为其中有一个额外的空值(由于使用 "" 初始化数组，这会创建一个空字符串作为第一个数组中的元素)并且因为它们没有排序。从标识符值创建一个集合可以为您解决这个问题。

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

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

关于javascript - dc.js 中带有计数的条形图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29131445/

上一篇：javascript - 如何使用 get() 获取嵌套的 Scope 属性

下一篇：javascript - Node JS 的 SQL 外部化(XML 解析)

相关文章：

javascript - D3.js:使用 origin() 函数按组中包含的元素拖动组 ('g' 中的所有内容

php - Jquery Ajax 无响应

d3.js - d3 onclick 获取具体路径/栏引用

javascript - 在交叉过滤器对象中切片数据

reactjs - DC.js 到 React 的转换

javascript - 如何使用 lodash 生成 key 配对对象结果？

javascript - 使用 firefox w/firebug，如何在浏览器中编写 javascript 并使用 .js 文件对象？

javascript - d3.js 404 json 文件未找到

javascript - 属性中的链接长度和强度

javascript - 保持 D3 圆形包的纵横比 - 响应式设计

©2024 IT工具网  联系我们