隐藏 dc.js 图表 x 轴答案

【问题标题】：Hide dc.js chart x-axis隐藏 dc.js 图表 x 轴
【发布时间】：2014-04-12 12:14:59
【问题描述】：

如下图所示，由于数据范围大，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);

谢谢！

【问题讨论】：

将它们转换为百分比是什么意思？您还可以发布一个 jsFiddle 吗？它总是有助于获得高质量的答案。
嗨@Chapo 百分比太多了。现在我可以只删除和解决 a 轴域了 :-)

标签： javascript charts dc.js

【解决方案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; }

【讨论】：

【解决方案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 对象相关联，这可能会导致令人抓狂的错误。

【讨论】：

哇，这就是你的做法。昨天我试图自己弄清楚这一点，并试图在 .x() 配置方法中使用比例，但没有任何改变。

【解决方案3】：

好笑！我刚刚解决了！

提示：调整图表边距。肮脏但对我来说工作正常：-P

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

【讨论】：

@ManojG 是的~希望对你有帮助~刚刚发现我们对 R 和 D3 的可视化有相同的兴趣:-)
哈，是的。它帮助了我。是的，我对用于数据科学和 D3 可视化的 R 感兴趣。很高兴看到相同的兴趣:-)

【解决方案4】：

我对 y 轴有同样的问题，这是在库本身中解决问题的一种方法：

在var _yElasticity = false;这一行之后添加：
```
  var _yVisibility = true;
```

在_chart.elasticY = function (_) { ... }的声明之后定义一个新的函数.showYAxis([boolean])添加：

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

更改确定y轴何时渲染的条件

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

到

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

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

【讨论】：

【解决方案5】：

你可以试试

toneChart.xAxis().ticks(0)

在你的 CSS 中（擦除坐标轴）

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

【讨论】：

【解决方案6】：

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

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

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

【讨论】：

【解决方案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';
        }
    }

【讨论】：