首页 文章

序数条形图上的dcjs y轴？

提问于
浏览 次
1

使用dc.js，我创建了一个带有数值的序数条形图 . 我选择了序数图，因为我想为'未知'添加一个x-tick .

问题在于y轴 . 我无法弄清楚轴标记/缩放 . 如图所示，它在[00,20,40,60,80]之间交替 . 我希望它有一个完整的范围 . 我试图手动插入y刻度，但似乎没有y轴的存取方法 . 下面是我的代码和捕获 .

ghg2Chart /* dc.barChart('#volume-month-chart', 'chartGroup') */
        .width(FULL_CHART_WIDTH)
        .height(FULL_CHART_HEIGHT)
        .margins({top: 10, right: 20, bottom: 40, left: 20})
        .dimension(GHG2)
        .group(GHG2Group)
        .elasticY(true)
        .centerBar(true)
        .gap(5)
        .round(dc.round.floor)
        .alwaysUseRounding(true)
        .x(d3.scale.ordinal().domain(GHG2bins))
        .xUnits(dc.units.ordinal)
        .renderHorizontalGridLines(true)
         //Customize the filter displayed in the control span
        .filterPrinter(function (filters) {
            var filter = filters[0], s = '';
            s += numberFormat(filter[0]) + ' -> ' + numberFormat(filter[1]);
            return s;
        })
        .filterHandler(function (dimension, filter) {
            var selectedRange = ghg2Chart.filter();
            dimension.filter(function (d) {
                var range;
                var match = false;
                // Iterate over each selected range and return if 'd' is within the range.
                for (var i = 0; i < filter.length; i++) {
                    range = filter[i];
                    if (d >= range - .1 && d <= range) {
                        match = true;
                        break;
                    }
                }
                return selectedRange != null ? match : true;
            });
            return filter;
        });

enter image description here

javascript d3.js dc.js

1 回答

  • 1

    您的图表唯一的问题是没有足够的空间用于刻度线，因此标签会被剪裁 .

    默认左边距为30像素：

    https://github.com/dc-js/dc.js/blob/develop/web/docs/api-latest.md#dc.marginMixin+margins

    尝试增加保证金 . 懒惰的方式是：

    chart.margins().left = 40;

    但这有点令人困惑，所以更常见的方式是

    chart.margins({top: 10, right: 50, bottom: 30, left: 40});

    dc.js自动执行此操作会很棒：

    https://github.com/dc-js/dc.js/issues/713

    但是基于文本大小进行布局是相当困难的，所以现在所有这些东西仍然是手动的（影响图例，轴标签等）

    回复于

相关问题