隐藏 dc.js 图表 x 轴

Question

如下图，由于数据范围大，x 轴非常混乱。 我想删除 x 轴，任何运气？

我目前的代码：

toneChart.width(300).height(280)
    .dimension(tone)
    .group(toneGroup)
    .title(function (d) { return ""; })
    .ordering(function(d) { return - d.value })
    .cap(10)
    .transitionDuration(750)
    .renderLabel(true)
    .colors(d3.scale.category10())
    .elasticX(true);

谢谢！

Answer 1

通过 CSS 可以隐藏轴和文本。

删除行图的 x 轴

将以下内容添加到您的 CSS（用您的 #ID 替换）：

#your-row-chart svg g g.axis.x { display: none; }

删除条形图的 y 轴

将以下内容添加到您的 CSS（用您的 #ID 替换）：

#your-bar-chart svg g g.axis.y { display: none; }

Answer 2

您可以通过来自 D3 的 .xAxis().tickFormat() 方法控制 X 轴上值的格式。

// To format as a percent
chart.xAxis().tickFormat(function(v) { return 100 * v/yourDenominator + "%"; });

// To blank the the values entirely, though not the actual ticks marks themselves 
chart.xAxis().tickFormat(function(v) { return ""; });

这是文档的链接

https://github.com/dc-js/dc.js/blob/master/web/docs/api-1.6.0.md#xaxisxaxis

我发现最好在传统的配置方法堆栈之外执行此类操作，因为如果您将 .xAxis().tickFormat() 与其他所有内容一起包含在内，那么堆栈中的下一个方法当然会相关联使用 .tickFormat() 调用发出的 D3 对象，这可能会导致令人抓狂的错误。

Answer 3

有趣的！ 我刚刚解决了！

提示：调整图表边距。 脏但对我来说很好用 :-P

.margins({top: 0, right: 0, bottom: -1, left: 0})

Answer 4

我对 y 轴有同样的问题，这是在图书馆本身中做到这一点的一种方法：

1. 在var _yElasticity = false;行之后var _yElasticity = false; 添加：

    var _yVisibility = true;

2. 在_chart.elasticY = function (_) { ... }声明之后，通过添加以下内容定义一个新函数.showYAxis([boolean]) ：

    /** #### .showYAxis([boolean]) Turn on/off y axis. **/ _chart.showYAxis = function (_) { if (!arguments.length) { return _yVisibility; } _yVisibility = _; return _chart; };

3. 更改确定何时呈现 y 轴的条件

    if (_chart.elasticY() || render) { _chart.renderYAxis(_chart.g()); }

到

        if ((_chart.elasticY() || render) && (_chart.showYAxis()) ) {
            _chart.renderYAxis(_chart.g());
        }

4. 现在，您只需添加.showYAxis(false)即可删除图表中的 y 轴。

Answer 5

你可以试试

toneChart.xAxis().ticks(0)

并在您的 CSS 中（擦除轴）

.toneChart .axis path, .axis line{
stroke: none;
}

Answer 6

根据@VictorCortes 的回答，我认为这是最简单的方法。 没有 CSS，没有修改库。

根据您的图表类型使用xAxis或yAxis ：

toneChart.yAxis().tickFormat(function(v) {return "";});
toneChart.yAxis().ticks(0);

Answer 7

这是一个有效的 TypeScript 解决方案。它搜索“axis x”类列表并隐藏 xAxis 元素。

public checkXAxisVisibility() {
        const elements = document.getElementsByClassName('axis x');
        if (elements && elements.length > 0) {
            const xAxis = elements[0] as HTMLElement;
            xAxis.style.display = this.chartHasData ? 'block ' : 'none';
        }
    }