我使用dc.js
创建的条形图一直存在问题,因为条形图上的条形对于x轴来说太宽,导致一些难看的溢出。
以下是我在代码中使用.xUnits(dc.unit.ordinal)
时的图片:
以下是我在代码中使用.xUnits(function() { return 10})
时的图片:
这是我生成图表的代码
function makeGraph(error, pubJson)
{
pubChart = dc.barChart("#publication-chart");
var pubData = pubJson;
var pubCrossfilter = crossfilter(pubJson);
var pubDimension = pubCrossfilter.dimension(function(data)
{
return data.PlaceOfPub; //will read in all occurances of publication. Cannot be acted upon
});
var pubGroup = pubDimension.group().reduceCount();
var pubGroupFiltered = groupFilter(pubGroup);
pubChart
.width(1280)
.height(350)
.x(d3.scale.ordinal().domain(["Amsertdam", "Cambridge", "Dublin", "Edinburgh", "Unknown", "Geneva", "Glasgow", "Lugano", "Oxford", "Paris", "The Hague"])) // Need empty val to offset first value
.xUnits(function() {return 10})
.margins({top: 10, right: 40, bottom : 30, left : 40})
.brushOn(false)
.yAxisLabel("Number of Books Written in Country")
.xAxisLabel("Cities")
.dimension(pubDimension)
.group(pubGroupFiltered)
//.ordering(function(d) {return d.value})
.label(function(d){ return d.data.key + " : " + d.data.value});
pubChart.render();
}