DC 图表 - 自定义序数 x 轴标签

Question

所以，我有以下 json 数据集的 dc 条形图（简化视图）：

[{"p":0,"d":0, "M":435},{"p":1, "d":2, "M":574},{"p":0, "d":1, "M":687}...]

理想情况下，我应该有platform 而不是p，device 而不是d，然后相应地，平台的0 将是mobile，平台的1 将是@ 987654329@ 和类似的设备。我已将这些名称替换为字母和数字，以便请求更小的 json 文件。 （我的数据集非常庞大！）M 是我想要求和的指标。

我创建了一个直流条，您可以在下面的代码中看到：

var pfmValue = facts.dimension(function(d) {return d.p;});
var pfmValueGroupSum = pfmValue.group().reduceSum(function(d) {return d.M;});

barChart.width(280)
.height(200)
.margins({top: 10, right: 10, bottom: 20, left: 80})
.dimension(pfmValue)                                
.group(pfmValueGroupSum)                            
.transitionDuration(800)
.centerBar(true)    
.gap(120)                                            
.x(d3.scale.ordinal().domain(["0", "1"])) ---> I want this to display "mobile" and "corewebsite" instead!
.elasticY(true)
.xUnits(dc.units.ordinal);

如何自定义我的d3.scale.ordinal().domain 以便在 x 轴上显示实际名称？ 谢谢！

另外，任何关于如何压缩我的 json 文件的建议都将不胜感激。

编辑1： 我使用了以下内容：

.x(d3.scale.ordinal().domain(data.map(function (d){ if (d.p = 0) {return "Corewebsite";} else if (d.p = 1) {return "mobile";}; })))

这让它显示了 x 轴所需的标签，但是条形图彼此重叠，而标签看起来很好。有什么解决方法吗？

编辑2： 了解到我之前对这个功能的理解是有缺陷的。尽管如此，即使以下给出了与上述相同的结果（Edit1）：

.x(d3.scale.ordinal().range([0,1]).domain(["corewebsite", "mobile"]))

Answer 1

标签重叠的原因是它们彼此太靠近。原因是宽度太小了。这些可能是可能的解决方案：

• 缩短标签
• 增加宽度
• set x axis labels to be vertical