javascript - 向 d3 条形图添加标签

Question

我有一个 d3 条形图，我从 firebase 中提取数据。我想将标签添加到 x 轴。这是我的条形图的代码:

new Firebase('https://exampl.firebaseIO.com/example').on('value', function (snapshot) {
    var lst = [];
    snapshot.forEach(function(childSnapshot) {lst.push(childSnapshot.val());});
    var magValue = new crossfilter(lst).dimension(function (d) {return d.count;});
    var magLabel = new crossfilter(lst).dimension(function (d) {return d.Owner;});

    dc.barChart("#dc-magnitude-chart")
        .width(480)
        .height(150)
        .margins({top: 10, right: 10, bottom: 20, left: 40})
        .dimension(magValue)    // the values across the x axis
        .group(magValue.group().reduceSum(function(d) {return d.count;}))                            // the values on the y axis
        .transitionDuration(500)
        .centerBar(true)    
        .gap(56)       // bar width Keep increasing to get right then back off.
        .x(d3.scale.linear().domain([0.5, 7.5]))
        .elasticY(true)
        .xAxis().tickFormat(function(v) {return v;}); 
    dc.renderAll();

    });

magValue 是发生次数的简单计数，它显示在 x 轴上。我希望存储在 magLabel 变量中的名称显示在计数下方。谢谢。

Answer 1

供引用:在@bencripps答案的评论中，OP讨论了使用xAxis.tickValues(['One','two','third','four',' Five','six' ,'七']).

tickValues 实际上是如果您想在您使用的比例内指定自定义刻度。现在，您正在使用线性刻度:

.x(d3.scale.linear().domain([0.5, 7.5]))

因此它期望您的刻度值是可以绘制刻度的刻度上的点。如果您有类似 xAxis.tickValues([1, 2, 3, 4, 5, 6, 7]) 的东西，它应该可以工作。

但是，听起来您实际上并不想要线性比例。 d3 还有其他音阶类型，听起来您想要的是 Ordinal Scale 。序数刻度是您通常想到的条形图刻度；它们是一种具有离散域的尺度。在这种情况下，您可以尝试将比例更改为:

.x(d3.scale.ordinal().domain(['One','two','three','four','five','six','seven']))

所以它使用序数尺度来代替。由于您使用的是 dc.js，因此您还需要指定

.xUnits(dc.units.ordinal)

以便它知道使用序数标记。