Question

因此，我有以下json数据集的直流条形图（简化视图）：

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

理想情况下，我会使用platform代替p，device代替d，然后相应地，0 for platform将mobile 1}}，1 for platform将为corewebsite，类似于设备。我用字母和数字替换了这些名称，以便请求更小的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文件的建议都将不胜感激。

EDIT1：我使用了以下内容：

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

这使得它显示x轴所需的标签，但是条形图重叠在一起，而标签看起来很好。对此有何解决方法？

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

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

Answer 1

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

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

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

1 个答案: