隐藏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

你可以尝试

toneChart.xAxis().ticks(0)

和你的CSS（擦除轴）

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

Answer 5

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

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

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

Answer 6

这是一个有效的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';
        }
    }