Adicionar rótulos a um gráfico de barras d3

Question

Eu tenho um gráfico de barras d3 para o qual extraio dados do Firebase.Quero adicionar os rótulos ao eixo x.Aqui está o código do meu gráfico de barras:

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 é a contagem simples de ocorrências e é exibida no eixo x.Quero que os nomes armazenados na variável magLabel sejam exibidos abaixo das contagens.Obrigado.

Answer 1

Para referência:nos comentários da resposta do @bencripps, o OP fala sobre o uso xAxis.tickValues(['One','two','three','four','five','six','seven']).

tickValues na verdade, é se você deseja especificar ticks personalizados dentro da escala que está usando.No momento, você está usando uma escala linear:

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

portanto, ele espera que os valores dos seus ticks sejam pontos nessa escala onde ele pode desenhar ticks.Se você tivesse algo mais parecido xAxis.tickValues([1, 2, 3, 4, 5, 6, 7]), deve funcionar.

No entanto, parece que você realmente não deseja uma escala linear.d3 também tem outros tipos de escala, e parece que o que você deseja é um Escala ordinal.Escalas ordinais são as escalas que você normalmente usa para gráficos de barras;eles são um tipo de escala que possui um domínio discreto.Neste caso, você poderia tentar alterar sua escala para algo como:

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

então ele usa uma escala ordinal.Como você está usando dc.js, também precisará especificar

.xUnits(dc.units.ordinal)

para que saiba usar marcas ordinais.

Answer 2

Aqui está um código simples para adicionar um eixo X;você terá que mexer no domínio e no intervalo para obter o comprimento desejado e o número de ticks.

var XaxisScale = d3.scale.linear()
    .domain([0,150]) //you will have to set the domain, not sure what you want
    .range([0, magValue.length)

var xAxis = d3.svg.axis()
    .scale(XaxisScale)
    .ticks( magValue.length ) // this you will need to set as well

var xAxisGroup = $('"#dc-magnitude-chart').append("g")
    .attr('class', 'axis')
    .attr('transform', 'translate(5,8)')
    .call(xAxis);

observação, o .call(xAxis) é o que realmente está anexando o eixo X ao seu gráfico.