计数在 dc.js 中的条形图
Bar Chart with Counts in dc.js
我正在尝试创建一个条形图来按标识符显示记录数，但无法正确显示。
希望有人能看看这个并发现我的问题所在。
我正在连接到一个数据源，该数据源 returns 一组如下所示的对象：
[{
"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 个柱，每个柱高 1。
[{
"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>
变化是：
- 你的
xUnits 被设置为 d3.scale.ordinal，你实际上希望它是 dc.units.ordinal，根据 Using an ordinal scale ('d3.scale.ordinal') for the x-axis in a bar chart
这是另一个有进一步变化的片段：
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 属性是字符串，您试图在代码中将它们强制转换为整数，这可能只是您提供的样本数据的一个特点，并且无论如何，在这个例子中没有任何区别。
我正在尝试创建一个条形图来按标识符显示记录数，但无法正确显示。
希望有人能看看这个并发现我的问题所在。
我正在连接到一个数据源，该数据源 returns 一组如下所示的对象：
[{
"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 个柱，每个柱高 1。
[{
"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>
变化是：
- 你的
xUnits被设置为d3.scale.ordinal，你实际上希望它是dc.units.ordinal，根据 Using an ordinal scale ('d3.scale.ordinal') for the x-axis in a bar chart
这是另一个有进一步变化的片段：
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 属性是字符串，您试图在代码中将它们强制转换为整数，这可能只是您提供的样本数据的一个特点，并且无论如何，在这个例子中没有任何区别。