我正在尝试创建一个条形图，它将按标识符显示记录计数，但无法正常显示。
希望有人能够看到这个并发现我的问题所在。
我正在连接一个数据源，它返回一个如下所示的对象数组：
[{
"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"
}]
答案 0 :(得分：2)
据我所知，实际得到的图表只有一个错误，尽管可能并不完全符合您的要求。
首先，这是一个有效的片段：
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>
改变是：
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属性是字符串，并且您试图将它们强制转换为代码中的整数，这可能只是您提供的示例数据的特性，也可能是case，在这个例子中没有任何区别。