Hinzufügen von Beschriftungen zu einem d3-Balkendiagramm

Question

Ich habe ein D3-Balkendiagramm, für das ich Daten aus Firebase abrufe.Ich möchte die Beschriftungen zur x-Achse hinzufügen.Hier ist der Code meines Balkendiagramms:

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 ist die einfache Anzahl der Vorkommen und wird auf der x-Achse angezeigt.Ich möchte, dass die Namen, die in der Variablen magLabel gespeichert sind, unter den Zählungen angezeigt werden.Danke.

Answer 1

als Referenz: In den Kommentaren zu @bencripps Antwort spricht der OP mit der Verwendung von xAxis.tickValues(['One','two','three','four','five','six','seven']).

tickValues ist eigentlich, wenn Sie benutzerdefinierte Ticks in der von Ihnen verwendeten Maßstab angeben möchten. Sie verwenden jetzt eine lineare Skala:

generasacodicetagpre.

Es geht also davon aus, dass Ihre Zeckenwerte Punkte auf dieser Skala stehen, in denen er Ticks ziehen kann. Wenn Sie etwas mehr wie xAxis.tickValues([1, 2, 3, 4, 5, 6, 7]) hätten, sollte es funktionieren.

Es klingt jedoch, als wären Sie eigentlich keine lineare Skala. D3 hat auch andere Scale-Typen, und es klingt nach dem, was Sie wollen, ist ein Ordinalwaage . Ordinalwaagen sind die Waage, an die Sie normalerweise für Balkendiagramme denken. Sie sind eine Art Maßstab, die eine diskrete Domain hat. In diesem Fall könnten Sie versuchen, Ihre Waage an so etwas zu ändern:

generasacodicetagpre.

also verwendet es stattdessen eine ordinale Maßstab. Da Sie dc.js verwenden, müssen Sie auch angeben

generasacodicetagpre.

damit es weiß, Ordinalmarkierungen zu verwenden.

Answer 2

Hier ist ein einfacher Code zum Hinzufügen einer X-Achse;sie müssen mit der Domain und dem Bereich herumspielen, um die gewünschte Länge und Anzahl der Ticks zu erhalten.

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);

beachten, der .call(xAxis) hängt die X-Achse tatsächlich an Ihr Diagramm an.