javascript - dcjs 序数条形图上的 y 轴?

标签 javascript d3.js dc.js

使用 dc.js,我制作了一个带有数值的序数条形图。我选择序数图是因为我想为“未知”添加 x 勾。

问题出在 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

最佳答案

图表的唯一问题是没有足够的空间容纳刻度线,因此标签被剪裁。

默认左边距为 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

但是根据文本大小进行布局相当困难,因此目前所有这些内容仍然是手动的(影响图例、轴标签等)

关于javascript - dcjs 序数条形图上的 y 轴?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36432760/

相关文章:

javascript - 如何处理 axios 中的 401(身份验证错误)并使用react?

javascript - 如何验证输入的日期格式是否有效?

javascript - 为什么 D3 对输入的关注仅在第一次起作用?

javascript - 我正在尝试使用 Tornado 数据制作旭日图

d3.js - 在 dc.js 工具提示中添加图表

javascript - 使用 dc.js、d3.js 和 crossfilter 的引用错误

javascript - 使用 css 显示/隐藏 html 表格列

javascript - 输入/更新/退出连接模式 Bostock 示例似乎不适用于位置 0 处的新数据 "inserted"

javascript - 交叉过滤平均组

javascript - 如何在 dc.js 中更改饼图和行图中标签的字体大小?