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