Dc.js条形图条对于x轴来说太宽

时间:2018-04-05 15:59:15

标签: javascript d3.js dc.js crossfilter

我使用dc.js创建的条形图一直存在问题,因为条形图上的条形对于x轴来说太宽,导致一些难看的溢出。

以下是我在代码中使用.xUnits(dc.unit.ordinal)时的图片:

Overflowing Bars

以下是我在代码中使用.xUnits(function() { return 10})时的图片:

enter image description here

这是我生成图表的代码

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

0 个答案:

没有答案